BASIC LEVEL: Layout template without position

[nhereveri]

Need help to define properly CSS for this layout, just in container box.

I use this code, but break container for too long lists:

#items {

position: fixed;

width: 200px; /* this is arbitrary */

}



#section1 {

position: relative;

left: 201px;

width: 280px; /* this is arbitrary */

}



#section2 {

position: relative;

left: 201px;

width: 320px; /* this is arbitrary */

}

Please no add DIVs or other container tags.
Thanks in advance!

[Senff]

You sure you want a fixed position for #items? I would personally go for floats, something like this:

#items {

float:left;

width: 200px;

}



#section1 {

float:left;

width: 320px;

}



#section2 {

float:left;

width: 320px;

}

However, if you really need to position things for some reason, you’ll have to be more specific in explaining why/how/etc.

[nhereveri]

OK, I need to #items stay on left side, but two sections on right side.
Problem happens when #items height is lower or equal than #section1 or the container is wider than #items and #sections together.
If just use float left:


I understand that using a single container for sections help in this, but do not want to be unnecessary. I also do not solve the problem elegantly. Yes, i have OCD.

[Senff]

So you want section 2 to always be under section 1, no matter how short or tall the #items block is? I think this would be it then? http://jsfiddle.net/senff/2uGkn/

#items is floated left
#section1 and #section2 just have a left margin of 200 pix (or whatever) but not floated.

[nhereveri]

O.o ¡so simple!
Thanks man, you are cool.

[Author]

Posts