Log in

View Full Version : div positioning


llorax
04-14-2007, 12:47 AM
I've tried to position the two divs as shown below but they don't end up floating next to each other. What's the best way to make them stay side by side within my table cell? http://emmagonline.com/emcore/


#sidebar {
position: relative;
float: left;
margin-left: 5px;
padding: 10px 10px 15px 15px;
width: 177px;
text-align: left;
}

#content {
position: relative;
float: left;
width: 177px;
text-align: left;
}
Veronica
04-14-2007, 01:02 AM
Generally it's not a good idea to mix divs and tables. You can get the same effect with just divs.
But if you're going to use tables, the sidebar and the content needs to be in the same td cell, and within a containing div.

You need to move the td with the right_bg.jpg to come AFTER the content div

<!-- LEFT SIDE ENDS HERE -->

</div>
<div id="content">this is content yadayada</div>
</TD>
<TD COLSPAN=9 style="background-image:url(images/images/right_bg.jpg)" class=righttable>
</td>
</tr>


Then put both the sidebar div and the content div within a NEW div, and they should align correctly.
llorax
04-14-2007, 03:32 AM
I usually build sites with divs only however this layout isn't mine I'm simply adapting it to expression engine. Also I've never been able to get divs to center themselves like the table does.

Are you saying that both content and sidebar should float within a different div with the same rules except width large enough to encompass both? Thanks for your help!
Veronica
04-14-2007, 04:03 AM
No. The container div doesn't even need any rules. It just needs to be there or the float properties won't work and the divs will stack up one on top of each other..



<html>
<head>
<title>Em Magazine | May 07 Issue 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' type='text/css' media='all' href='http://emmagonline.com/emcore/index.php?css=may2007/site_css' />
<style type='text/css' media='screen'>@import "http://emmagonline.com/emcore/index.php?css=may2007/site_css";</style>
<style>
#sidebar {
position: relative;
float: left;
margin-left: 5px;
padding: 10px 10px 15px 15px;
width: 177px;
text-align: left;
}

#content {
position: relative;
float: left;
width: 177px;
text-align: left;
}
</style>

</head>

<body>
<table id="Table_01" align="center" width="780" height="auto" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../emcore/themes/site_themes/may2007/may_01.gif" alt="" width="779" height="85" border="0" usemap="#Map"></td>
<tr>
<td><img src="../emcore/themes/site_themes/may2007/may_02.jpg" width="779" height="161" alt=""></td>
</tr>
<tr>
<td style="background-image:url(../emcore/themes/site_themes/may2007/may_03.gif)" width="779" height="auto" alt=""

<div id="container">


<div id="sidebar"><!-- LEFT SIDE START HERE -->

<FONT SIZE= "+1"><i>em magazine</i> is the lifestyle magazine for creative and intelligent<br> Emerson students.</FONT>


<img src="photos/advertise.jpg" ><br><br>

<b><span class=main>Mailing List</span></b><p>
<form action="newsletter.php" method="post">
Name: <br><input type="text" name="name" size="20"><p>
Email : <br><input type="text" name="email" size="20"><p>
<input type="submit" value="Submit">
</form>
<p><br><br>

<A HREF="http://www.emmagonline.com/launchparty.php"><FONT SIZE="+2"><b> Click Here for Launch Party Photos</b></FONT></A>
<p><br>

<A HREF="http://media.www.jsons.org/media/storage/paper139/news/2007/01/31/EmersonNews/Em.Magazine.To.Offer.Emerson.New.Outlet.For.Ideas.Contributors-2703782.shtml"<b> Click Here to read an article about us</b></A><br><br><br>

<a href= "contact.php"> Interested in Working for <br><i> em magazine </i>? Or just want to show your support? Contact Us! </A><P><P><Br>

<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=156712208&MyToken=f6f63b83-f7e6-4d0d-9c35-71cfd22f36af"> Be our MySpace Friend!</A><P><P><Br>

<a href="index.php">back to index</a>

<!-- LEFT SIDE ENDS HERE -->

</div>
<div id="content">this is content yadayada</div>

</div>
</TD>
<TD COLSPAN=9 style="background-image:url(images/images/right_bg.jpg)" class=righttable>
</td>
</tr>
<tr>
<td colspan="2"><img src="../emcore/themes/site_themes/may2007/may_04.gif" width="780" height="65" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
<map name="Map">
<area shape="rect" coords="16,69,96,86" href="http://emmagonline.com/emcore/index.php">
<area shape="rect" coords="105,62,185,79" href="http://emmagonline.com/emcore/index.php/may2007/editors_note.php/">
<area shape="rect" coords="194,65,246,82" href="http://emmagonline.com/emcore/index.php/may2007/features.php/">
<area shape="rect" coords="254,64,306,81" href="http://emmagonline.com/emcore/index.php/may2007/emerson.php/">
<area shape="rect" coords="312,62,352,79" href="http://emmagonline.com/emcore/index.php/may2007/looks.php/">
<area shape="rect" coords="357,65,443,80" href="http://emmagonline.com/emcore/index.php/may2007/entertainment.php/">
<area shape="rect" coords="452,65,538,80" href="http://emmagonline.com/emcore/index.php/may2007/relationships.php/">
<area shape="rect" coords="540,66,599,79" href="http://emmagonline.com/emcore/index.php/may2007/media_kit.php/">
<area shape="rect" coords="604,66,659,80" href="http://emmagonline.com/emcore/index.php/may2007/archives.php/">
<area shape="rect" coords="664,67,698,85" href="http://emmagonline.com/emcore/index.php/may2007/staff.php/">
<area shape="rect" coords="708,67,770,82" href="http://emmagonline.com/emcore/index.php/may2007/contact_us.php/">
</map>
</body>
</html>
llorax
04-14-2007, 08:05 PM
it still is not working for some reason...hmmm
Veronica
04-15-2007, 04:18 PM
I'm looking at what you have up there now.
Again, you need to get the sidebar and the content into the same td, not just the same div. The content can't be in the td with the colspan=9. It has to come in the td before it.

Copy and paste everything below into your html document and you'll see what I mean. It lines up in FF and IE.



<html>
<head>
<title>Em Magazine | May 07 Issue 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' type='text/css' media='all' href='http://emmagonline.com/emcore/index.php?css=may2007/site_css' />
<style type='text/css' media='screen'>@import "http://emmagonline.com/emcore/index.php?css=may2007/site_css";</style>
</head>

<body>
<table id="Table_01" align="center" width="780" height="auto" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../emcore/themes/site_themes/may2007/may_01.gif" alt="" width="779" height="85" border="0" usemap="#Map"></td>

<tr>
<td><img src="../emcore/themes/site_themes/may2007/may_02.jpg" width="779" height="161"></td>
</tr>
<tr>
<td style="background-image:url(../emcore/themes/site_themes/may2007/may_03.gif)" width="779" height="auto">
<div id="content">
<div id="sidebar"><!-- LEFT SIDE START HERE -->

<FONT SIZE= "+1"><i>em magazine</i> is the lifestyle magazine for creative and intelligent<br> Emerson students.</FONT>


<img src="photos/advertise.jpg" ><br><br>

<b><span class=main>Mailing List</span></b><p>
<form action="newsletter.php" method="post">
Name: <br><input type="text" name="name" size="20"><p>
Email : <br><input type="text" name="email" size="20"><p>
<input type="submit" value="Submit">
</form>
<p><br><br>

<A HREF="http://www.emmagonline.com/launchparty.php"><FONT SIZE="+2"><b> Click Here for Launch Party Photos</b></FONT></A>

<p><br>

<A HREF="http://media.www.jsons.org/media/storage/paper139/news/2007/01/31/EmersonNews/Em.Magazine.To.Offer.Emerson.New.Outlet.For.Ideas.Contributors-2703782.shtml"<b> Click Here to read an article about us</b></A><br><br><br>

<a href= "contact.php"> Interested in Working for <br><i> em magazine </i>? Or just want to show your support? Contact Us! </A><P><P><Br>

<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=156712208&MyToken=f6f63b83-f7e6-4d0d-9c35-71cfd22f36af"> Be our MySpace Friend!</A><P><P><Br>

<a href="index.php">back to index</a>

<!-- LEFT SIDE ENDS HERE -->

</div>
<div id="blog">this is content yadayada</div>
</div></TD>
<TD COLSPAN=9 style="background-image:url(images/images/right_bg.jpg)" class=righttable>
</td>
</tr>

<tr>
<td colspan="2"><img src="../emcore/themes/site_themes/may2007/may_04.gif" width="780" height="65"></td>
</tr>
</table>
<!-- End ImageReady Slices -->
<map name="Map">
<area shape="rect" coords="16,69,96,86" href="http://emmagonline.com/emcore/index.php">
<area shape="rect" coords="105,62,185,79" href="http://emmagonline.com/emcore/index.php/may2007/editors_note.php/">
<area shape="rect" coords="194,65,246,82" href="http://emmagonline.com/emcore/index.php/may2007/features.php/">
<area shape="rect" coords="254,64,306,81" href="http://emmagonline.com/emcore/index.php/may2007/emerson.php/">

<area shape="rect" coords="312,62,352,79" href="http://emmagonline.com/emcore/index.php/may2007/looks.php/">
<area shape="rect" coords="357,65,443,80" href="http://emmagonline.com/emcore/index.php/may2007/entertainment.php/">
<area shape="rect" coords="452,65,538,80" href="http://emmagonline.com/emcore/index.php/may2007/relationships.php/">
<area shape="rect" coords="540,66,599,79" href="http://emmagonline.com/emcore/index.php/may2007/media_kit.php/">
<area shape="rect" coords="604,66,659,80" href="http://emmagonline.com/emcore/index.php/may2007/archives.php/">
<area shape="rect" coords="664,67,698,85" href="http://emmagonline.com/emcore/index.php/may2007/staff.php/">
<area shape="rect" coords="708,67,770,82" href="http://emmagonline.com/emcore/index.php/may2007/contact_us.php/">
</map>
</body>
</html>