Problem aligning divs next to each other?

Question

I want this design:

DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divt         


        

Answer 1

I believe I can help!

What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.

Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.

What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.

The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.

---

There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .

This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!