PDA

View Full Version : side by side divs within a 3 column layout



htcilt
Feb 19th, 2010, 11:49 AM
Hi all,

I have a 3 column layout e.g. http://www.neuroticweb.com/recursos/3-columns-layout/

I need to further split the centre column into 2. The left being around 230px and the right being the rest of the available with.

I tried floating the 230px centre-column and centre-right column. But the problem is in Firefox, the parent centre column (whole page content) shrinks to a few pixels in height - not the full height of the screen.

Does anyone know how I can get 2 divs side by side, in the centre column of a 3 column layout?

abduraooft
Feb 19th, 2010, 12:31 PM
#content_right {
margin-left:230px;
}
#content_left {
float:left;
width:230px;
}

<div id="content">
<div id="content_left"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris.</p></div>
<div id="content_right">
CONTENT
<br/>
<a href="?larga=cen&amp;width_total=700&amp;width_de=150&amp;width_iz=150&amp;color_de=33CC99&amp;color_ce=F1F1F1&amp;color_iz=CC6633">[+]</a>
<p> Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin</p>
</div>
</div>

htcilt
Feb 19th, 2010, 12:42 PM
Thanks for the reply.

Looking at it more closely, it seems the centre column is never 100% of the screen in Firefox. It shrinks to the size of the content thats inside.

Is there a way around this, or do I need to use another method of 3 column layout?

abduraooft
Feb 19th, 2010, 12:53 PM
Looking at it more closely, it seems the centre column is never 100% of the screen in Firefox. It shrinks to the size of the content thats inside.I didn't get that. How do you expect your centre column to stretch to the width of the screen when it's inside wrapper, which is having a fixed width?

htcilt
Feb 19th, 2010, 01:00 PM
Its the height thats the problem.

For example, look on http://news.bbc.co.uk/
Thats the kind of thing I need to achieve. 2 grey columns either side of a white column, designed for 1024 resolution.

Lets forget the contents of the centre column for the moment.
The problem I've got is when the centres column has no/little content (no scrolling), the centre column shrinks in height. So if I have just a one line paragraph, the height of the centre column is 1 paragraph - leaving a large grey area underneath (html background color).

I found another post with the same problem here:
http://www.ultrashock.com/forums/client-side/css-help-3-column-layout-fixed-center-left-right-fluid-91876.html

If you copy their "solution" at the bottom of the thread, it should give you the problem in Firefox.

Let me know if you need anymore info. I really appreciate your help ;)

abduraooft
Feb 19th, 2010, 01:15 PM
So if I have just a one line paragraph, the height of the centre column is 1 paragraph - leaving a large grey area underneath (html background color). Usually this kind of issues are solved by adopting a faux coumn method (http://http://www.alistapart.com/articles/fauxcolumns/)(I hope you know it)

Or you may use display:table; in CSS, see http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/

htcilt
Feb 19th, 2010, 01:49 PM
Thanks abduraooft,
The faux column method worked perfectly, thank you!