View Full Version : Divs Help [Simple?]

04-09-2009, 07:53 PM
Hi Guys I Need some help with Divs. I Have the problem that when i put two boxes into divs that i want expandable they go under each other images shown below will help describe.

First; What i want to look like


Second; What it looks like


Hope you can help and ive describe it enough. Just need to know how to make the next to each other asap.

Thanks Lucas

04-09-2009, 08:43 PM
Hello Lucas0123,
To put elements side by side like that you would float them.
Have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
* {
margin: 0;
padding: 0;
outline: none;
border: none;
#container {
width: 1000px;
margin: 30px auto;
padding: 4px;
background: #fff;
overflow: auto;
#box1, #box2 {
height: 500px;
#box1 {
width: 796px;
float: left;
background: #999;
#box2 {
margin: 0 0 0 800px;
background: #ccc;
<div id="container">
<div id="box1">
<!--end box1--></div>
<div id="box2">
<!--end box2--></div>
<!--end container--></div>

In this example,

#container background is white and we've added a 4px padding to serve as a border (could use border: 4px solid #fff; instead)
#box1 is floated left
#box2 is margin over far enough to allow for #box1 and the white space

You just have to adjust the widths of the boxes to fit right. See box model to calculate widths (http://www.w3.org/TR/CSS2/box.html).

04-09-2009, 10:04 PM
Okie Thanks thats helped but its still not right its moved over but wont go up into postition.

Its like this now


would be thankful if u could help.

04-09-2009, 10:27 PM
What browser are you using? Do note that you should never use Internet Explorer (especially 6 or 7) as your primary testing browser. Use Safari, Firefox or Chrome instead.

That said, Excavator's code checks out in IE6 (which it where I suspected your problem was).

Post your code (in &#91;CODE&#93;&#91;/CODE&#93; tags) and we'll help you sort it out.

04-09-2009, 11:57 PM
That said, Excavator's code checks out in IE6 (which it where I suspected your problem was).

Thanks msuffern, I never check in IE6 unless someone is specifically having a problem with it. My way of ignoring that browser.