CSS Forum

**l3lueMage** · 10-17-2007, 03:52 PM

How do you get it so 2 divs are next to eachother? Heres my code so far.

HTML Code:

<body>
<div id="container">
<div><img src="images/port1_03.jpg" alt="Spark Designs Header"/></div>
<div id="side"><img src="images/port_05.jpg" /></div><div id="content">asdasd</div>
</div>

</body>

And heres the CSS Code:

Code:

#side {
width:181px;
}
#content {
width:500px;
}

I'm trying to get 'side' and 'container to be next to eachother instead of below eachother. I always have problems with this and I Find a solution but a month later I forget how to do it haha.

**LadynRed** · 10-17-2007, 04:39 PM

You float them.

#side{
float: left;
width: 181px;
}
#content{
width: 500px;
float: left;
}

OR.. float #side, then just use margins to push #content over:
#content{
margin-left: 191px;
width: 500px;
}

Just make sure you CLEAR your floats after #content.

**l3lueMage** · 10-17-2007, 04:48 PM

Ahh that did the trick, thanks!

**l3lueMage** · 10-17-2007, 05:13 PM

Aaaah haha xD Next question how do you get THREE lol! I do the float thing on the middle and everything blows up

Heres my code now updated.

HTML Code:

<div id="container" style="padding-left:10px; padding-right:10px; background-color:#309fab;">
<div id="container" style="background-color:#0a383d;">
<div><img src="images/portfolio_03.jpg" alt="Spark Designs Header"/></div>
<div id="side"><img src="images/portfolio_05.jpg" /></div><div id="content"><table width="100%" border="0" cellpadding="4" cellspacing="0">
  <tr>
    <td>Announcements</td>
  </tr>
  <tr>
    <td><span class="newsbody">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vitae sem ac ante feugiat scelerisque. Ut tincidunt. In turpis. Phasellus pede arcu, faucibus at, semper vitae, nonummy eu, ipsum. Integer dictum ligula id libero. Morbi blandit venenatis dui. Vestibulum iaculis, arcu vel scelerisque semper, velit risus lacinia lectus, et iaculis nisl purus in velit. Aliquam congue tellus a augue. Suspendisse hendrerit erat sed elit. In nec sapien. Morbi at eros vel massa tristique dictum. Donec interdum faucibus ante. Nullam blandit dictum leo. Etiam nibh elit, viverra fringilla, facilisis a, eleifend eu, quam. Duis sit amet erat quis enim ultrices consequat. Duis sem leo, aliquet vel, lobortis non, accumsan non, velit. Praesent purus arcu, pellentesque ac, auctor sed, luctus ut, pede. Donec et magna. Nunc dolor eros, tristique non, rhoncus vitae, ultricies eu, tortor. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br />
      Posted October 17, 2007</span></td>
  </tr>
</table>
</div>
<div id="navigation">Navigation lawl</div>
</div> <!-- Container 1 -->
</div> <!-- Container 2 -->
</body>

Code:

#navigation {
width:219px;
margin-left:681px;
}
#side {
float:left;
width:181px;
}
#content {
    width:500px;
    margin-left:181px;
    color:#dd8308;
}


.newsbody {
font-size: 11px;
color:#FFFFFF;
}

Trying to get the navigation div next to the announcements but it either goes to the bottom corner or the whole site blows up. I tried doing the float? but thats what makes it die lol

**l3lueMage** · 10-17-2007, 05:58 PM

Update..I sort of got it but sort of not. Heres screenshots and hers the code....D; I used negative margin? LOL Dont know how stable that will be in the future...I just can't figure it out now it's still messed up....So if anyone can help me fix it so I dont use negative number for margin? :P.

http://img337.imageshack.us/img337/844/ieffhs6.jpg

Theres the preview thing and hers my current CSS as it stands now for the navigation, the rest you can see above:

Code:

#navigation {
    position:absolute;
    width:210px;
    margin-left:690px;
    margin-top:-120px;
}

**l3lueMage** · 09:57 AM

Omg I fixed it, don't even ask how cause I don't even know. I took a break came back and it was fixed? Like a magic fairy came in my room while I was gone and fixed it for me XD!