1 reply [Last post]
dcaverman
dcaverman's picture
Offline
newbie
Last seen: 6 years 6 weeks ago
Timezone: GMT-5
Joined: 2014-05-28
Posts: 7
Points: 11

I've got a complete newbie question that I can't figure out why it's not working. Basically I'm trying to get two columns of content inside of a div. My probably is that it's acting like it's stacking the two div tags on top of each other.

I have first div called AllContent that is set to keep the overall page content to 800px wide. Inside of that I have

What is being produced is the image to the left as expected but then the floating div on the right is sitting below the image. I can't get the columns to be side by side. Any help would be appreciated.

#AllContent {
width:800px;
margin-left:auto;
margin-right:auto;
border: solid 2px #000;
background-color:#f8eed5;
}

#Header {
background-color:#d2c8af;
padding:5px;
}

#Menu {
background-color:#444444;
height:26px;
}

#Content {
background-color:#f8eed5;
padding:5px;
}

#Logo {
padding-top:3px;
margin:0px 5px 5px 0px;
}

#MissionText {
float:right;
width:625px;
margin:0px 0px 0px 150px;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi dcaverman, A couple of

Hi dcaverman,
A couple of things could help here, always specify widths when you float.
If you float something to the right you should put it in the content before what ever is sitting to the left.
Remember to consider the box model, paddings margins etc with width.

To help more we would need to see the markup.