CODEWITHSUNDEEP
csshtml
Andrew Saindon
Andrew Saindon

Reputation: 41

HTML <div> placement issues with css

Here is the site in question. http://www.splintercomm.net I need the divs to site next to each other while remaining spaced apart horizontaly. In short I dont want them stacked I want them side by side.

body {
background-image:url('wild_oliva.png');
} 
div.container   {
overflow: hidden;
}
div.end {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-bottom:auto
}
div#body {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-left:20%;
overflow: hidden;
width:80%;
}
div#sidebar {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;

float:left;
width:18%;
float:left;
}

Upvotes: 4

Views: 98

Answers (3)

Aaron Fowler
Aaron Fowler

Reputation: 474

I'm not exactly sure what isn't working for you here, as I'm seeing the blocks line up side-by-side in Firefox, chrome and safari. Is this a problem only in IE7?

In any case, I would just float the body div to the left also. Replace the div#body css with the following:

div#body {
  float: left;
  margin-left: 1%;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

Note that the left margin must be less than 2% of the width minus all of the borders (4px), or the body div will be too wide and flow under the sidebar.

Another option is to float the div#body to the right and just omit the left margin:

div#body {
  float: right;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

Basically, if you want everything to line up on the same line, the total width of the margins, borders, padding, and box areas must be less than or equal to 100% of the browser (window) width.

18% (sidebar width) + 80% (body width) + 2px (sidebar-borders) + 2px (body-borders)

= 98% + 4px, which is less than 100% at most browser widths.

Upvotes: 1

Roger
Roger

Reputation: 2952

Although I'm not sure if I understand the question, remove margin:20%; from div#body

Upvotes: 0

Ibu
Ibu

Reputation: 43850

you can make the divs inline using this property:

display:inline-block;

Note 1: You have an error in your doctype declaration

<doctype html>

Should be 

<!doctype html>

Note 2: I only see one div in your sample code.

Upvotes: 1

Related Questions