How to create rows using DIV vs Table... **UGH!**

HTML & CSS
1

I am stumped beyound belief atm…

I am trying to create a 2 column 2 row layout for my header area. If I were using tables this would be a snap, but trying to do this with CSS is causing me to pull my hair out. Can you help me?

Here’s a screenshot of what the header should look like once the CSS is put together:

http://screencast.com/t/8ZJ1pEhpko

Here’s a screenshot of what I have done:

http://screencast.com/t/Y3hvc9FgY1N

I need to create 3 rows to teh right of the logo, then float the content to the right on each of the 3 rows…

At least that is my train of though thus far. What do you think?

Thanks a million!!

2

OK, assuming this is fixed width, the first thing I’d do is make that red/black background one single background image and place that on the main container as a bg image.

Then, to keep things a bit simpler, I might have a div floated left to hold the logo and a div floated right to hold everything else. (That right div is not essential, but might make things a little neater.) Give both divs an appropriate width.

Then, inside the right div, have a para with the toll free number, with right-aligned text. Give padding as necessary to create the spacing.

Then, under that, perhaps a div that holds the paragraph (floated left) and the form (floated right).

Then under that your navigation UL, with appropriate margins/padding, with the LIs set to float: left.

For best results, set any element with floated contents to overflow: hidden to force it to wrap around its floated contents.

Does that make sense?

3

Tho Ralph may have answered your Q, I looked at your desired layout and feel it necessary to chime in.

A lot of people transitioning from tables layouts to CSS find this issue perplexing, and get stuck IN TRYING TO SOLVE how to do with DIVs what they did with TDs .
#1 That shouldnt be your goal.
#2 That shouldnt be your goal.

:slight_smile:

#1) Start by coding your HTML semantically.
#2) Now that you have coded your HTML semantically you can assign BGs to elements at needed, which 9/10 wont follow a “row” structure.

Looking at your intended output ( and assuming that TEACH CPR is a LOGO) naturally suggest this structure

<div id="hedWrap">
<h1>Teach CPR</h1>
<p>Call toll free</p>
<form...><p>..Alive tomorrow</p></from>
<ul id="mainnav"> <li><a href="#">Nave Item</a></li>...</ul>
</div>

Alternatively you could do away with the logo as content …

<div id="hedWrap">
<p>Call toll free</p>
<form...><p>..Alive tomorrow</p></from>
<ul id="mainnav"> <li><a href="#">Nave Item</a></li>...</ul>
</div>

Neither is a row structure ( you don’t need a col for the logo and col for other things!!!)

In fact, in the latter example you can achieve the same effect setting the same amount of padding-left, as the width of the logo, to the container as using the logo image as a bg.

BUT more realistically the name of your organization is content so let’s keep the H1, shall we?

<div id="hedWrap">
<h1>Teach CPR</h1>
<p>Call toll free</p>
<form...><p>..Alive tomorrow</p></from>
<ul id="mainnav"> <li><a href="#">Nave Item</a></li>...</ul>
</div>

#hedWrap{background:url (headgradient.gif) repeat-x #MactchingRed; }
h1{height: height of logo image px;  width: width of logo image px; overflow:hidden; position:relative; float:left;}
h1:after{ position:absolute; top:0; left:0; height:100%; width:100%;  background: url (logo.jpg) no-repeat; content:"";}
#hedWrap >p, #hedWrap form, #mainnav{ margin-left: width of logo image px}

That is a bare bones conceptual explanation, but you can see it is far simpler and also more semantically correct than merely trying to recreate tables with divs.