467,915 Members | 1,382 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

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

Mar 22 '07 #1
  • viewed: 9452
Share:
4 Replies
On 22 Mar, 16:20, "Alex" <sama...@gmail.comwrote:
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?

Mar 22 '07 #2
On Mar 22, 12:37 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
On 22 Mar, 16:20, "Alex" <sama...@gmail.comwrote:
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

Mar 22 '07 #3
Alex wrote:
Here's my code:
Post a URL instead.

--
Berg
Mar 22 '07 #4
On 22 Mar, 19:51, "Alex" <sama...@gmail.comwrote:
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.

Mar 23 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Bryan R. Meyer | last post: by
4 posts views Thread by Jane Withnolastname | last post: by
11 posts views Thread by NS | last post: by
4 posts views Thread by Richard | last post: by
5 posts views Thread by aljamala | last post: by
6 posts views Thread by sooshi | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.