HTML and CSS

CSS DIV container align multibrowser+unwanted margin

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2008

Posts: 1

Reputation: Apaxe is an unknown quantity at this point

Solved Threads: 0

Apaxe

Offline

Newbie Poster

CSS DIV container align multibrowser+unwanted margin

Oct 5th, 2008

Hi,
[/CODE]
I'm trying to make a website using divs and CSS and I'm having some problemss that I just can't solve

1.I'm using a container DIV, to center the content, and in SAFARI everything falls apart.
2.in IE7 the second orange bar is too far from the bottom of the grey ones and in FIREFOX is less seen but, as i care for grids, I would like to make a 5px margin as everywhere else.

A JPG of the renders can be seen here: http://www.andresousa.eu/browser_screen.jpg

CSS USED

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

div#container{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 600px;
	display:block;
}
 
div#orange_bar {
	position: relative;
	width:600px;
	background-color: #D75600;
	height: 16px;
	margin-bottom: 0px;
}
 
div#content_left {
	display:table;
	position: relative;
	background-color:#353535;
	width: 110px;
	height: 110px;
	margin-top: 5px;
 
}
 
div#content_right {
	display:table;
	float:right;
	position: relative;
	background-color:#353535;
	width: 485px;
	height: 110px;
	bottom: 110px;
	margin-left: 0px;
 
}

HTML

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div id="container">
 
<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>
<div id="content_left"></div>
<div id="content_right"></div>
<div id="content_left"></div>
<div id="content_right"></div>
 
<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>
<div id="content_left"></div>
<div id="content_right"></div>
 
<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>
<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>
 
</div>
<div id="container">

<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>
<div id="content_left"></div>
<div id="content_right"></div>
<div id="content_left"></div>
<div id="content_right"></div>

<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>
<div id="content_left"></div>
<div id="content_right"></div>

<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>
<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>

</div>