8 replies [Last post]
brokencircuit
brokencircuit's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Joined: 2006-04-22
Posts: 9
Points: 0

Hi, I'm working on a new site, and am trying to align two divs next to eachother. I've done the basics, the left div is floated left, and the right to the right, etc. In dreamweaver, everything is to the edge and perfectly aligned exactly as it's coded. However, when I open it into a browser (IE, FIREFOX, etc.) the right side div is misaligned. I have added some pic links so you can see what I'm talking about, along with the css for the page. Any help would be great, thanks. I'm a noob at this, I only started a week ago, so I am sure this is an easy fix.
Inside of Dreamweaver:

Inside of Firefox:

Inside of IE6:

And the CSS:
<style type="text/css">
<!--
body {
background-color: #0066B3;
background-image: none;
}
#container {
text-decoration: none;
width: 640px;
margin-right: auto;
margin-left: auto;
margin-top: 45px;
text-align: justify;
}
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}
#photobooth {
text-decoration: none;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
margin-right: auto;
margin-left: auto;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
background-color: #00487D;
border: 1px solid #000000;
width: 640px;
}
#photo {
border: 1px solid #80C9FF;
width: 638px;
margin-right: auto;
margin-left: auto;
}
#navcontainer {
float: left;
width: 175px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding: 0.5em;
height: 177px;
background-color: #00487D;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: groove;
border-bottom-color: #000000;
text-indent: 5px;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #80C9FF;
height: 20px;
padding: .5px;
}
#content {
float: right;
width: 425px;
font-family: Arial, Helectiva, sans-serif;
font-size: 12px;
color: #ffffff
padding: 0.5em;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
background-color: #00487D;
margin: 0px;

}
-->
</style>

Any ideas?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[solved] Weird Div Alignment Problem

Don't rely on DW's preview - it's not a real browser.
For your right column, you don't need to float it right, just remove the width and give it a left margin wider than the width of your left column.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brokencircuit
brokencircuit's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Joined: 2006-04-22
Posts: 9
Points: 0

[solved] Weird Div Alignment Problem

Tried your idea, and the gap is still there. Does anyone else know? This is so odd. I've even deleted the div and replaced it with a new one, and re compiled the style for it, nothing works.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[solved] Weird Div Alignment Problem

How about you show us the actual HTML associated with the CSS (a link to a page would be better).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brokencircuit
brokencircuit's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Joined: 2006-04-22
Posts: 9
Points: 0

[solved] Weird Div Alignment Problem

www.daburu.org/temps/index.html

that's how I left it.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[solved] Weird Div Alignment Problem

Tyssen wrote:
For your right column, you don't need to float it right

You've still got the float on your right column.
Also, you don't need to attach a class to each of those links, you can target them by doing #navcontainer a (although they would be better off in a List.
And you can condense your CSS with a bit of shorthand:

border: 1px solid #000;
border-width: 0 1px 1px 1px; /* top right bottom left */

instead of
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brokencircuit
brokencircuit's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Joined: 2006-04-22
Posts: 9
Points: 0

[solved] Weird Div Alignment Problem

Okay, well, I applied your style, removed the float again, and still nothing.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[solved] Weird Div Alignment Problem

Set container to display:table and you'll possibly need to feed a little hidden height (holly hack) to IE. It's the padding on the #photobooth div that causing you the problems. You can float #contents or not.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

brokencircuit
brokencircuit's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Joined: 2006-04-22
Posts: 9
Points: 0

[solved] Weird Div Alignment Problem

Works perfect in firefox now, so thank you for that. But what am I adding height to, #photobooth or #content?