View Full Version : Divs directly next to eachother

02-25-2009, 03:05 AM
Hello. I have an assignment for a class to create the image bellow using divs and css. The boxes are supposed to have a border and have the same thickness everywhere (ie the lines of the two bottom divs are supposed to look as if there's one). To me it would be much simpler to do this with a table but that's not an option. Any help would be appreciated.


02-25-2009, 05:50 AM
From a purely graphic standpoint the CSS code is actually much more simple than a table would be. If the eventual goal is a more complete page, study some of these layouts (http://blog.html.it/layoutgala/) for CSS tips.

What do you have so far in the way of code? Have you tried anything? You should know that a request for help for a school project with only the description of the assignment makes it sound an awful lot like you want us to do your assignment for you, something both your professor and the folks here would likely frown upon.

02-25-2009, 07:11 AM
Thanks for your response msuffern.

Sorry I was not trying to be a leech I just needed a little direction. The templates you pointed me to got me on the right foot but I do still need a little help. Here's what I got so far:

<title>zomg it's a title</title>
<link rel="stylesheet" type="text/css" href="css/css.css"/>

<div class="top"></div>
<div class="br"></div>
<div class="bl"></div>

And my CSS:

div.top {
background: #333;
color: #FFF

div.bl {

div.br {

What I need is for the orange box, div.br, to be to the right of the blue one, div.bl, directly next to each other. I believe I need to use the float property but when I apply a float right it is shifted all the way to the absolute right of the browser window. Is there a way to specifically tell it to be directly next to the left box?

02-25-2009, 10:10 AM
Have a look at this - http://css.maxdesign.com.au/floatutorial/

By giving it a DocType we can, hopefully, ensure it renders the same in all browsers. See the link about DocTypes in my sig below.
By putting your 3 divs in a container div we can either move the container to the middle of the browser window or just margin it over from the edge.
bl is floated left.
br is margined over the width of bl.

When you go to add your border, things will change. Border counts when totaling width, as do margin/padding. Have a look at the box model (http://www.w3.org/TR/CSS2/box.html).