I'm having a problem using DIVs to make my page layout.
I'm trying to do a webpage using just divs. I want the page (ideally) to look like this:

Where both the big sections automatically resize to the size of the window. Pretty darn easy to do with tables.
So, in my inline CSS, I've got the style declaration like so:
Code: Select all
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;"e;>
::PRIMARY::
</div>
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;"e;>
::SECONDARY::
</div>
<div style = "e;padding:2px;width:200px;height:300px;border:1px solid #333333"e;>
::CONTEXT-LINKS::
</div>
<div style = "e;padding:2px;height:300px;width:100%;border:1px solid #333333;margin-left:2px"e;>
::BODY::
</div>
So I figure it's because <div>'s have their display property set to "block" by default. So, I try to overwrite that by declaring the display property as inline (which I though meant, don't render a newline before and after the element). My code now looks like this:
Code: Select all
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;"e;>
::PRIMARY::
</div>
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;"e;>
::SECONDARY::
</div>
<div style = "e;padding:2px;width:200px;height:300px;border:1px solid #333333;display:inline;"e;>
::CONTEXT-LINKS::
</div>
<div style = "e;padding:2px;height:300px;width:100%;border:1px solid #333333;margin-left:2px;display:inline;"e;>
::BODY::
</div>
Anyone have any ideas on how to go about doing this?