All geek questions in one place

CSS layout for "2 columns + em-width delimiter in the middle"

How to get the following layout using HTML + CSS:

| |x| | | |x| |

All three columns (two columns and a separator) must be touching, i.e. their background colors should touch without any gaps.

The problem with creating such a layout is that I want the “separator” to have the width measured in em (i.e. based on the font width), while the columns of the main content should match the rest of the width of the enclosing element (t .e. about 50%). I want this layout to be saved without a separator lying above the left or right columns of the content regardless of the font size (i.e. the layout should be saved if I increase or decrease the font width).

Please note that this layout is inside another container, and these containers can be repeated on the page. Because of this, I could not use any solution for absolute positioning.

Also, the container should not use a fixed width: think of it as a container with width: 100%; or width: auto; (or unset width).

Bonus points if the layout can be created with no left or right column (i.e. an empty column).

+6
source share
10 answers

One possibility:

HTML:

 <div class="container"> <div> Column A </div> <div> Column B </div> </div>

CSS:

 .container { overflow: auto; } .container > * { float: left; width: 50%; -moz-box-sizing: border-box; box-sizing: border-box; } .container > :first-child { border-right: 0.5em solid COLOR; } .container > :last-child { border-left: 0.5em solid COLOR; }

where COLOR is the background color of the separator column.

Live demo: http://jsfiddle.net/3XHSu/show/

+5
source

Using inline-block , you can create many different non-trivial layouts.

I made two examples: the first, with absolute equal heights: http://jsfiddle.net/kizu/nMWcG/

And the second option with a physical space separator: http://jsfiddle.net/kizu/nMWcG/5/

They are slightly different (and there may be even more inline-block based layouts that solve your problem), hopefully at least one of them will work for you :)

The whole idea is to use white-space: nowrap on, so the columns will not be discarded if the sum of their width is greater than the wrappers, "and then add a padding on the wrapper with width: auto , which will be equal to the desired gap.

If you need only one column, you can leave one of the columns empty (without .column-content ) or delete them and have an additional class. Well, it depends on how you want the lone column to behave, etc.

+5
source

You can always use absolute positioning, but you need to position a common ancestor ( relative ). Flexible multi-column layouts can be done best with float:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS Test Case: 2-Column Layout with Separator</title> <style type="text/css"> .container { position: relative; float: left; background-color: green; } .container .left { float: left; width: 50%; background-color: red; } .container .left .padding { margin-right: 5em; } .container .right { float: right; width: 50%; background-color: fuchsia; } .container .right .padding { margin-left: 5em; } .container .separator { position: absolute; left: 50%; top: 0; width: 10em; height: 100%; margin-left: -5em; background-color: blue; } div.clearBoth { clear: both; margin: 0; padding: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; } </style> </head> <body> <h1>CSS Test Case: 2-Column Layout with Separator</h1> <div class="container"> <div class="left"> <div class="padding"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit. </div> </div> <div class="right"> <div class="padding"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit. </div> </div> <div class="separator"></div> </div> <div class="clearBoth"><!-- clear --></div> </body> </html>

note that

  • the background colors are touching, since you do not see horizontal green (but see below); Container dimensions
  • they do not matter (it works with any size of the viewport and any text content, but see below);
  • It works with any font size;
  • it works with any separator width if you also adjust the margins (see below);
  • it works anywhere and several times in a document because it uses CSS classes, not identifiers;
  • it works if you set display: none in the left column, in the right column, or both. As a result, it works if there is no left column, right column, or both in the markup,
  • it uses a minimal set of selectors, properties, and property values ​​that are all available with CSS1 or CSS2 .

Because of the latter, it should also work in all browsers that support CSS2, since it does not rely on any particular UA implementation. I tested this positive value in the following browsers:

  • Microsoft Internet Explorer 9.0.8112.16421 for Windows 7
  • Google Chrome 16.0.912.41 beta for Debian GNU / Linux
  • Google Chrome 15.0.874.121 m for Windows
  • Chromium 14.0.835.202 (Developer Build 103287 Linux) Embedded Debian is unstable, runs on Debian 6.0.3
  • Mozilla Firefox 8.0.1 for Windows ( Wine )
  • Iceweasel (Debian Firefox) 8.0
  • Mozilla Firefox 7.0.1 for Windows (at fault)
  • Mozilla Firefox 6.0.2 for Windows (on Wine)
  • Mozilla Firefox 5.0 for Windows (on Wine)
  • Mozilla Firefox 4.0.1 for Windows (on Wine)
  • Mozilla Firefox 3.6.24 for Windows (on Wine)
  • Mozilla Firefox 3.5.19 for Windows (on Wine)
  • Mozilla Firefox 3.0.19 for Windows (on Wine)
  • Iceape (Debian SeaMonkey) 2.0.14
  • Apple Safari 5.0.2 (7533.18.5) for Windows (fault)
  • Apple Safari 4.0.5 (531.22.7) for Windows (on Wine)
  • Opera 11.52.1100 for Linux
  • Konqueror 4.6.5 for GNU / Linux (on KDE 4.6.5)
  • Google Android 2.3.4 Browser
  • Dolphin Browser HD 7.1.0 for Android
  • Mozilla Firefox 8.0 for Android
  • Opera Mobile 11.50 for Android
  • Apple Mobile Safari 5.0.2 (6533.18.5) on iOS 4.2.1 (8C148) on iPhone 3G (MB496FD)

He does not work:

  • Mozilla Firefox 2.0 for Windows (in Wine): Floating files are not supported.
  • Mozilla Firefox 1.5.0.12 for Windows (on Wine): Floating files are not supported.
  • Mozilla Firefox 1.0.8 for Windows (in Wine): Floating files are not supported.
  • Microsoft Internet Explorer 6.0.2800.1106 for Windows 98 (on Wine): the separator is not always displayed, and when the width of the viewport changes, the layout falls apart. You can probably get around this with a stylesheet called by Conditional Comments . (See also tereško answer.)

Test scenario

Explanation:

  • With floats, you can have columns 50% wide, but you cannot have horizontal margins or spacers on them, because in a standard CSS W3C box, the width of the window is equal to width plus the horizontal padding. Therefore, any (horizontal) gaskets must be created by children.
  • In order for the contents of the column to be completed at the borders of the separator, you need margin-right and margin-left for child elements ( DIV ) in the left and right columns, half width separator ( 5em ), respectively. padding-right and padding-left can work if more width not involved.
  • To position the absolute delimiter between the left and right columns, the container must be located relative . The separator has a negative margin ( margin-left: -5em ) so that its field moves half its width: 10em from the middle ( left: 50% ).
  • The container must float: left so that it provides a styling context for the separator, which should be displayed on top of the columns (and always have the correct width). So you need clear: left before and clear: both after the container (the latter here with a zero-height DIV element).

Cautions:

  • If the height of the left and right columns is different, you will see a vertical green color. Use regular tricks to emulate equal heights. (See also tereško answer.)
  • If the viewport becomes smaller, the contents of the columns may overflow horizontally if it cannot be wrapped; especially replaceable inline elements such as images and long words. Declare an overflow or overflow-x value other than the default value ( visible ) to prevent this.

Update : checks both HTML 4.01 Strict and CSS2 now; clearing BR as a child of BODY , and the color name magenta did not match. In addition, the position property was introduced using CSS2.

+5
source 
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en"> <head> <title>CASH REGISTER</title> <style type="text/css"> @media all { body { margin:0 ; padding:0 ; background:#000000 ; color:white } div { margin:0 ; padding:0 ; font-size:2em } } </style > </head> <body> <div style="background-color: #888 ; width: 51em"> <div style="background-color:red;float:left;width:25em">1</div> <div style="background-color:green;float:left;width:1em">2</div> <div style="background-color:blue;float:left;width:25em">3</div> </body> </html>
+3
source

Take a look at http://jsfiddle.net/gjQVW/4/

 <div class="container"> <div>left</div> <div>right</div> <!--div>3rd</div> <div>4th</div--> </div>

With these styles

 .container {display: table; width: 100%; margin-left: 0; margin-right: 0; margin-top: 3em; background: red} .container > DIV {border: 1px dashed red; display: table-cell; width: 1%; border-left: 0.5em solid black; border-right: 0.5em solid red; background: yellow} .container > DIV:first-child {background: pink; border-left: 1px solid lime} .container > DIV:last-child {background: teal; border-right: 1px solid yellow}

Using display: table and table-cell , you can have both columns with the same height and make sure they are next to each other. You can also add multiple columns or just leave 1. You may need to adjust width: 1% . For only two columns, 50% should be enough, but as you add columns, you should start lowering it so that the columns are the same, etc. You can also use padding for the separator, but margin and table-cell don "ok."

Also note that :last-child css selector is not supported in IE 8, and you will need to use a class or identifier in the DIVs column.

EDIT: Added another fiddle to cover the DIV, which should be in the middle, since it needs to hold somecontent

http://jsfiddle.net/frozenkoi/RfzWb/ HTML:

 <div class="mightyContainer"> <div class="container3"> <div>lefty<br><br><br>more lefty</div> <div class="divider">i</div> <div>right</div> <!--div>3rd</div> <div>4th</div--> </div> </div>

CSS

 .mightyContainer {position: relative; background: magenta; margin-top: 3em} .container3 {display: table; width: 100%; margin-left: 0; margin-right: 0; background: red; -k-position: relative} .container3 > DIV {border: 1px dashed red; display: table-cell; width: 50%; border-left: 0.5em solid yellow; border-right: 0.5em solid black; background: yellow} .container3 > DIV:first-child {background: pink; border-left: 1px solid lime} .container3 > DIV:last-child {background: teal; border-right: 1px solid yellow} .container3 .divider {text-align: center; width: 1em; background: lime; border: none; opacity: 0.5; display: block; position: absolute; top: 0px; bottom: 0px; left: 50%; margin-left: -0.5em; /*height: 100%*/; }

The separator is positioned in the middle with absolute positioning. Note that an extra DIV with the mightyContainer class mightyContainer necessary because in FireFox, a div with the divider class uses the entire page as a parent for positioning instead of conteiner3 . RockMelt (webkit) and IE 8/9 didn't seem to need this if you move styles from .mightyContainer to .container3 and remove the mightyContainer DIV (for an example of how FireFox behaves without this extra DIV, see http: // jsfiddle.net/frozenkoi/3zhsv/ ).

+3
source

You can do this with a combination of :after and text-indent . It works before IE8 for IE7 , and below you can use css :after hack http://css-tricks.com/snippets/css/clear-fix/ . In this example, I did not use hack for IE7 if you want to use.

check this:

http://jsfiddle.net/3XHSu/4/

OR

For modern browsers you can use the css3 box-flex property, there is no need to define width:50% Check this:

http://jsfiddle.net/XMg2h/2/

+3
source

Assuming you understood correctly:

The basic idea is this:

  • you take 50-50% of the floating layout
  • bind a fixed-width element <div class="main"> between the sides
  • adjust both source elements so that they use less space and then

As for the ability to delete the right side, it works in the original version, but to remove the left side, a <div class="fix"> placeholder is required, which occupies a space, because all elements are floating and the page will otherwise be hidden.

PS The fluid-fixed-fluid layout is sometimes tenderly called: the unholy grail .

PPS the layout may have a 3px gap error on IE6 (but I'm not sure about it .. ie6fix.css file was in the folder, but it was not included in the original test file).

+3
source

I do not know if you expect columns with the same height (there are many places that talk about this if you want to implement them), but this script http://jsfiddle.net/TNpnh/11/ shows some options. This avoids Sime box-sizing if you need to support IE7 and below. The basic structure:

HTML

 <div class="container"> <div class="LC"> Left </div> <div class="RC"> Right<br/>Taller </div> </div>

CSS

 .container { padding: 0 0 0 1em; /*this creates the extra space */ border: 1px solid red; overflow: auto; margin: 10px 0; } .container .LC { width: 50%; margin: 0 -1em; /* this allows all to fit */ float: left; background-color: yellow; border-right: 1em solid blue; } .container .RC { width: 50%; float: left; background-color: cyan; border-left: 1em solid blue; /* this is duplicated so it fills the tallest column */ }
+3
source

I really hope this helps you http://jsfiddle.net/EzfAs/

+2
source

Here you go - http://jsfiddle.net/wbednarski/w97ax/5/

The solution also works with a single column. The trick is in the .separator class.

+2
source

Source: https://habr.com/ru/post/901937/

More articles:


All Articles