All geek questions in one place

How to use "width auto" and "float" to align divs?

I would like to have a container (with some text) to the left of the page, which adapts itself with the available space, and 2 sidebars to the right (I use Wordpress). (2 sidebars work fine with float .) So I tried width:auto in the container.

But it does not adapt to the rest of the available space (it takes up the entire width of the page). If I set the width to 70%, it corresponds to the space on the index page, but if I click on the article, I will only have 1 sidebar, so there will be an empty space between the text and the sidebar.

Do you know how to fix this?

 #container { /* the text */ overflow:auto; width:auto; position:relative; float:left; } #primary { /* first sidebar */ position:relative; border:1px solid red; float:right; width:250px; } #second { /* second sidebar */ border:1px solid red; background:white; width:250px; height:auto; float:right; margin-left:15px; }

thanks

EDIT:

let's say I use this instead of the wordpress sidebars: I still can't get it to work, can someone take a look with this simple code? There are 2 boxes: green and red ...

 <!DOCTYPE> <html> <head> <meta charset="UTF-8" /> </head> <body> <div style="position:relative; width:700px; margin:0 auto;"> <div style="width:auto; border:1px solid green;">i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float. ) So i tried width:auto on the container. But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</div> <div style="width:20%; float:right; border:1px solid red;">blablabla</div> </div> </body> </html>
+4
source share
3 answers

Ok, I found this: put the text at the end, use overflow: hidden and automatic, and float right on the small container on the right, thanks for your answers.

+1
source

Width: auto is the default, so it won’t do anything other than what the DIV will do as standard, which should fill the available width since it is a block level element. This changes when you float it, and it will wrap its contents, so it can be of any width to the maximum width.

I think the problem you are working with is a mix of percentage and fixed widths. I see what you are trying to do - have a sidebar with a fixed width (or two) and the rest of the page is flexible. It was really easy to do this in tabular layouts, but don't let them go!

It looks like you need a layout, but with 2 fixed columns. It might be worth reading this article to see if something that you are trying to do is appropriate: http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats -the-right-one-for-you /

+3
source

Use display: table in the parent div. Then display: table-cell for children. They will align as they will be in the table.

 #container { /* the text */ overflow:auto; width:auto; position:relative; // float:left; display: table-cell; vertical-align:top; } #primary { /* first sidebar */ position:relative; border:1px solid red; // float:right; width:250px; vertical-align:top; } #second { /* second sidebar */ border:1px solid red; background:white; width:250px; height:auto; // float:right; margin-left:15px; display: table-cell; vertical-align:top; }
+1
source

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

More articles:


All Articles