Jump to content

Recommended Posts

Posted (edited)

I have a layout, I can't remember what to do to fix it and google hasn't been any help. Here is an image of what its doing.

index.png

 

Here is my code

 

HTML

<div class="header">
<div class="container">
	<p style="float: left;" class="whitet">Logo here</p>
	<p class="whitet" style = "float: right;">CONTENT HERE</p>
</div>
</div>
<div class="process">
<div class="container">
	<p class="whitet" style="font-size: 12px;padding-top: 200px;">Here is some content right here<br>Here is some more content in this very spot</p>
</div>
</div>
<div class="content">
<div class="container">
<div>		
<p class="whitet">content here</p>
</div>
</div>
</div>

 

CSS

 body {
margin: 0 auto;
font-family: Tahoma, sans-serif;
}

.container {
width: 960px;
margin: 0 auto;
padding-top:0px;
padding-bottom: 0px;	
margin-top:0px;
margin-bottom: 0px;


}
.header {
background: black;
height: 100px;
}


.process {
height: 300px; 
background: green;
}

.content {
height: 500px;
background: red;
}




.whitet {
color: white;
}

 

 

ALSO it isn't there when I remove the p tags but I kindof need them for content.

Edited by benjaminmorgan
Posted
1336857700[/url]' post='32279']

Nevermind, it works if I add * {padding: 0px; margin: 0px;}

 

The miracle cure clap.gif

Posted

Just so you are aware, the gaps were caused by the margins on the p tags -- adding the * reset fixed that because it removed those margins. Another way to handle it, I believe, would be to add overflow:hidden; to the divs so they properly enclose the p tags.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...