Positioning DIV's relative to each other

Hello,

I'm rewriting our corporate website, and to make editing the format
later I want to rewrite it completely using CSS with no table tags.
I've used CSS for years, but never exclusively, so I'm having some
problem converting some of the Table tags into CSS.

My first hurdle is we have a table with three TD's and I don't know
how to mimic this in CSS. Here's the code:

<TABLE cellSpacing=0 cellPadding=0 width=740 bgColor=#000000 border=0>
<TBODY>
<TR>
<TD width=140><IMG height=38 alt=search src="earch1.gif"
width=140></TD>
<TD vAlign=center align=left width=116><INPUT size=18
name=searchtext></TD>
<TD width=78><INPUT type=image src="search_go.gif"></TD>
<TD width=406><A href="submit.cfm"><IMG height=38
src="nursery.jpg" width=406 border=0></A></TD>
</TR>
</TBODY>
</TABLE>

If I were to create the following DIV's, how do I make them show-up
side by side? Also note, our page is centered on the screen, so I
need to direct it where to put it I guess based on the heading DIV,
which is DIV#Heading{ top: 0px; width: 740px; height: 191px;}. I
have the page centered with Body{text-align: center;}.

Div#Section1 {
width: 140px;
height: 38px;
}
Div#Section2 {
width: 116px;
height: 38px;
}
Div#Section3 {
width: 78px;
height: 38px;
}
Div#Section1 {
width: 406px;
height: 38px;
}

Thanks for any suggestions or ideas with this, and take care --

Alex

On 22 Mar, 16:20, "Alex" <sama... (AT) gmail (DOT) com> wrote:

If I were to create the following DIV's, how do I make them show-up
side by side?

float

Read <http://brainjar.com/css/positioning/> first

Back off on the pixel-based size units too. You're supposed to be
aiming at a fluid design here, otherwise why change?

On Mar 22, 12:37 pm, "Andy Dingley" <ding... (AT) codesmiths (DOT) com> wrote:

On 22 Mar, 16:20, "Alex" <sama... (AT) gmail (DOT) com> wrote:

If I were to create the following DIV's, how do I make them show-up
side by side?

float

Read <http://brainjar.com/css/positioning/> first

Back off on the pixel-based size units too. You're supposed to be
aiming at a fluid design here, otherwise why change?

Hi Andy,

That is a great article, and though I'm still reading through it (it's
long), I think it will help me in learning more 'tricks' with CSS.

As for my problem at hand, I've been working with Float and have ran
across my first browser issues as I have it working in Firefox but not
IE7. In IE7 it appears it's wrapping. Here's my code:

CSS File:
Div#Main{ position: relative; top: 0px; width: 740px; height: 38px;
background-color: #000000;}
Div#Section1{ position: relative; float: left; width: 140px; height:
38px; background-color: #000000;}
Div#Section2{ position: relative; float: left; width: 116px; height:
38px;}
Div#Section3{ position: relative; float: left; width: 78px; height:
38px;}
Div#Section4{ position: relative; float: left; width: 406px; height:
38px;}

HTML File:

<div id="search">
<div id="SearchIcon">
<IMG height=38 width="140" alt=search src="search1.gif">
</div>
<div id="SearchField">
<INPUT class="SearchBox" size="18" name="searchtext">
</div>
<div id="SearchGo">
<INPUT type="image" alt="go button" src="search_go.gif">
</div>
<div id="TopBanner">
<IMG height=38 width=406 src="home_nursery.jpg" border=0>
</div>
</div>

Now I'm picking it apart to see what I can do to have it look as it
should in IE as well. Any suggestions from the group?

Thanks --

Alex

Alex wrote:

Here's my code:

Post a URL instead.

--
Berg

On 22 Mar, 19:51, "Alex" <sama... (AT) gmail (DOT) com> wrote:

Any suggestions from the group?

Post a URL. If it's an IE CSS rendering issue, then I wouldn't even
think of looking at it without a working page, served from a real
server with headers on it. Snipped-out fragments just don't give you
enough context of things that are know to break IE.

But searching around "quirks mode" might enlighten you.