Css problen with layout

Dev Shed Forums Sponsor:

September 8th, 2012, 08:42 AM

nivlat

Registered User

Join Date: Sep 2012

Posts: 4

Time spent in forums: 2 h 22 m 38 sec
Reputation Power: 0

Css problen with layout

Hi every one, I have this problem with layout:

the navigtion block is perfectly aligned under the header (at 113px from top);
but the content (whatever I try - even specifying 113px from top) do not: there is always a space about 10px between header and content.
Please help!
thanks in advance,
nivlat

html
-------------------------------------

Code:

<head>
<title>the trashcan</title>
<link rel="stylesheet" type="text/css" href="main2colonne.css"/>
</head>
<body>
	<div id="container">
		<div id="header"><img src="logo.png"/><img src="trashcan.jpeg" width="113" height="113"/></div>
		<div id="content"><p>lotext text text text text text tee text text text text teext text text text txt text text text text texxt text ext text text totext text text text text text tee text text text text teext text text text txt text text texotext text text text text text tee text text text text teext text text text txt text text otext text text text text text tee text text text text teext text text text txt textotext text text text text text tee text text text text teext text text text txt text text text text texxt text ext text text text text texet text text text texxt text ext text text text text texettext text texxt text ext text text text text texett text texxt text ext text text text text texetext text texete </p></div>
		<div id="navigation"><p>first link</p></div>
		<div id="footer"><p>copyright bla bla bla bla bla</p></div>
	</div>
</body>
</html>

css
-------------------------------------------

Code:

body, html{
	margin: 0;
	padding: 0;
}
div#container{
	position: relative;
	width:80%;
	background-color: green;
	margin: auto;

}
div#header{
	margin-bottom: 0;
	height: auto;
}
div#content{
	background-color: blue;
	color: red;
	width: 80%;
	top: 113px;
}
div#navigation{
	position: absolute;
	right: 0;
	top: 113px;
	width: 20%;
	background-color: grey
}
div#footer{
	background-color: pink
}

September 8th, 2012, 09:19 AM

AndrewSW

JavaScript is not spelt java

Join Date: Feb 2011

Location: Landan, England

Posts: 743

Time spent in forums: 2 Weeks 1 Day 23 h 4 m 50 sec
Reputation Power: 164

This is caused by the first paragraphs' top margin:

Code:

div#content p {
    margin-top: 0px;
}

Note that this will remove the top margin from all paragraphs in the content div, so a better solution should be considered.

Added: I would recommend that you generally avoid absolute positioning - prefer floats. Absolute-positioning is only suitable in certain situations.

Last edited by AndrewSW : September 8th, 2012 at 09:21 AM.

September 8th, 2012, 09:58 AM

nivlat

Registered User

Join Date: Sep 2012

Posts: 4

Time spent in forums: 2 h 22 m 38 sec
Reputation Power: 0

thank you very much for help, I will try that and consider other solution

September 8th, 2012, 10:08 AM

nivlat

Registered User

Join Date: Sep 2012

Posts: 4

Time spent in forums: 2 h 22 m 38 sec
Reputation Power: 0

Tried out, now the gap is only about one-third than before, but there is still some.
I'm new to web design so I'm not sure of what I'm about to say: could it be a browser-related problem (I use firefox)?

any other ideas?

Thank you,
nivlat

September 8th, 2012, 10:32 AM

AndrewSW

JavaScript is not spelt java

Join Date: Feb 2011

Location: Landan, England

Posts: 743

Time spent in forums: 2 Weeks 1 Day 23 h 4 m 50 sec
Reputation Power: 164

Test it in different browsers. If you have the same issue then it is not browser-related.

I don't see a gap between the header and content in Firefox.

September 11th, 2012, 04:45 AM

aren

Registered User

Join Date: Sep 2012

Posts: 3

Time spent in forums: 57 m 38 sec
Reputation Power: 0

I got such a nice information.Thanks for sharing.

Css problen with layout

Developer Shed Advertisers and Affiliates