All geek questions in one place

Column Width and Width

I do not see what I am doing wrong here. I work with the widths and margins of three columns, and I want to expand the right sidebar into the white space on the left.

But when I increase the width of # sidebar-right above 22%, both sidebars drop below the content. I am missing something related to combined widths and margins.

HTML and CSS are under the image. It is also a responsive structure, if that matters. I need to stay with this CSS and HTML, as this is a WordPress theme, and I don't want to switch to another type of column or column structure.

Update 10/23/12 . I gave up trying to adapt the current CSS and HTML and changed to a CSS window layout model for page templates, because the window model works well, and I can simplify my page templates too.

Any ideas?

enter image description here

HTML:

<body class="three-column"> <div id="page"> <div id="main"> <div id="primary"> <div id="content" role="main"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> </div> <div id="sidebar-right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> <div id="sidebar-left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> </div> </div> (some closing divs omitted for clarity).

CSS

 #page { margin: 1em auto; max-width: 1075px; } #main #secondary { float: none; margin: 0 7.6%; width: auto; } .three-column #page { max-width: 1075px; } .three-column #primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } .three-column #content { margin: 0 34% 0 20%; width: 44%; border:1px solid #c2c2c2; padding:10px; } .three-column #sidebar-right { float: right; margin-right: 1.5%; width: 22%; border:1px solid #c2c2c2; padding:10px; } .three-column #sidebar-left{ position:relative; float: left; width: 15%; margin-left: -72%; border:1px solid #c2c2c2; padding:10px; }
+4
source share
8 answers

Your problem is the right margin of -26.4% on #primary and the left margin of -72% on # sidebar-left.

I made a fiddle with these settings; I dropped the lateral left left margin (but retained 1.5% for additions) and adjusted # the right right margin to -100%.

http://jsfiddle.net/mstauffer/CtkyN/1/

It's still pretty damn hacked. If you can somehow, you will have a much better experience reworking HTML and CSS .. but if not, this fiddle will at least allow you to resize the right sidebar as you want in this existing structure.

Update: I have no reliable sources, but I can explain CSS math. In general, you use negative margins on #primary to lay out the other two divs in areas that #primary will normally occupy. Generally, the only way to make divs overlap is the way it would be by setting them to position: fixed or position: absolute . Since it is so complicated, such a layout is usually executed with three left floats (or in the future, flexbox), but because the order of your HTML is not possible.

Instead, you are forced to convince the CSS rendering that #primary is not against reinstalling ... what you do by setting a negative margin of -100%, essentially saying: "There is all this space here, it’s good for you to cross it." After you open the space, you then use the left and right floats (and the width limit) to place the sidebars in the empty spaces on either side of #content.

I hope this helps!

+7
source

EDIT:

I made three columns that might work for you.

HTML

 <body class="three-column"> <div id="page"> <div id="main"> <div id="primary"> <div id="container"> <div id="sidebar-left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> <div id="sidebar-right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> </div> </div> </div> </div> </body>

CSS

 #container { text-align: left; margin: 0px auto; padding: 0px; border:0; width: 80%; } #sidebar-left { float: left; width: 30%; min-height: 300px; background-color: #cccccc; } #sidebar-right { float: left; width: 25%; min-height: 300px; background-color: #cccccc; } #content { float: left; width: 30%; min-height: 300px; background-color: #999999; }

I also noticed that having a border creates problems for the layout. Maybe adding the following will help keep the border inside the div.

 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

See the article .

Hope this helps.

0
source

I think the problem here is specific:

 .three-column #content { margin: 0 34% 0 20%; }

margin: upper right lower left;

therefore, you need to reduce the right margin to expand the right sidebar.
do not try. you better check it out.

0
source

use this code: -

HTML

 <body class="three-column"> <div id="page"> <div id="main"> <div id="primary"> <div id="sidebar-left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> <div id="content" role="main"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> </div> <div id="sidebar-right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> </div> </div> (some closing divs omitted for clarity).

CSS

 #page { margin: 1em auto; max-width: 1075px; } #main #secondary { float: none; margin: 0 7.6%; width: auto; } .three-column #page { max-width: 1075px; } .three-column #primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } .three-column #sidebar-left{ position:relative; float: left; width: 15%; } .three-column #content { margin: 0 34% 0 20%; width: 44%; border:1px solid #c2c2c2; padding:10px; float: left; } .three-column #sidebar-right { float: left; margin-right: 1.5%; width: 22%; border:1px solid #c2c2c2; padding:10px; }
0
source

It’s very simple that you very close forgot that the add-on complements the width of your content, so if you have 3 divs with 20% width and 10% margin and 10% indentation on each side, you will get more than 100% you need to move with .

Working jsfiddle here

0
source

Others have already given you an explanation. I just wanted to add a visual representation to make it easier to see the problem. The problem area

0
source

.three-column #content div is the middle content that needs to be left as #sidebar-left div width + padding and margin right as #sidebar-right div width + padding and does not need to fix the width for the middle content.

Check the sample and code .

0
source

Edit: I did not see the comments that you should have left with the same CSS. Perhaps this can be used in addition to what you currently have, but if not, please ignore it.

If you use ruler fluid with div dividers, you can scale them without having so many problems. CSS is in the fiddle.

http://jsfiddle.net/GeyHC/1/

 <div class="row-fluid"> <div class="span2" id="content" role="main" style="border:1px solid #c2c2c2;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> <div class="span6" id="sidebar-right" style="border:1px solid #c2c2c2;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> <div class="span2 offset1" id="sidebar-left" style="border:1px solid #c2c2c2;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. </div> </div>​
0
source

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

More articles:


All Articles