[css-d] Splitting the Center Column Into Two Columns?

[The Ferrett]

Hello, all; 

I have a three-column 800-pixel wide layout, with a floated div to the left
and the right, as you can see here:
http://www.starcitygames.com/SCG_6/test.html  Both the CSS and XHTML
validate.  

We will be publishing news items in the center column - each news item spans
the width of the center column in a single row.  Let's call these divs
#main, #left_sidebar, and #right_sidebar.  Each of the news items are divs
assigned to the .news_item class.  

The problem: my boss wants the capability to occasionally split a given
row in half, so we have two news items sitting next to each other on a
single row, just as you'd split a table cell in two.  This is proving to be
surprisingly difficult, especially since I'm expecting most of our news
items will span the entire width of #main.  

I attempted to do this by creating two test divs with very roughed-out pixel
counts: 

.left_half_block {
width: 200px; 
float: left; 
margin: 0px 5px 0px 0px;
}

.right_half_block {
margin-left: 220px;
}

That kind of worked - but as you can see at
http://www.starcitygames.com/SCG_6/test.html, because the .left_half_block
element is floated, if the .right_half_block has less content than
.left_half_block, it droops down to overlap the next .news_item div.  

Now, as I understand it, normally I would fix that by setting the .news_item
below it to clear: left, so that it can't have any elements on its
left-hand side.  But if I do that, then it (correctly) positions everything
below not just the .left_half_block element, but all the elements within
#left_sidebar.  Which means that every element in the #main is pushed far
down, giving me a vast amount of embarrassing white space.  

So am I overlooking something obvious here in how to fix this?  Is there a
way to restrict the namespace of clear, or some easy fix that I in my
noviceness am overlooking - or just a better layout for this style of split
news items in general?  (I may also be misunderstanding the logic here, and
if so I'm eager to see what I did wrong.)  

Thanks in advance, 
The Ferrett
Editor-in-Chief and Webmaster, StarCityGames.com 
This guy's like Gandhi, but better.  He likes puppets.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Splitting the Center Column Into Two Columns?

[David Laakso]

The Ferrett wrote:

 That kind of worked - but as you can see at
 http://www.starcitygames.com/SCG_6/test.html, because the .left_half_block
 element is floated, if the .right_half_block has less content than
 .left_half_block, it droops down to overlap the next .news_item div.  

   


Try adding this to open the container and enclose both blocks within it.
.gutter_container {overflow: hidden;}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Splitting the Center Column Into Two Columns?

[Gunlaug Sørtun]

The Ferrett wrote:

 http://www.starcitygames.com/SCG_6/test.html

 The problem: my boss wants the capability to occasionally split a 
 given row in half, so we have two news items sitting next to each 
 other on a single row, just as you'd split a table cell in two.

Somewhat like this, I guess...

http://www.gunlaug.no/tos/alien/tf/test_09_0401.html

CSS: http://www.gunlaug.no/tos/alien/tf/test_09_0401_files/table_fr.css

Basically: #main is floated, which isolates its content and prevents all
'clear' from acting on surrounding elements.
All involved dimensions and margins are then modified for correct
line-up in such an all float layout.

I didn't bother with quirks mode box model deviations in IE6 and older.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/