margin problem

**cesaroski** · 07-24-2012 03:49 AM

hello people!
So I'm creating this website and I want to create a first div in wich the background color is navy, and another inside the first div were instead the background color is white and the second div contains all the content of the website, unfortunately everytime I set the margin for the second div, all the website contents get all influenced by the div margin, please help!!!

**coothead** · 07-24-2012 06:06 AM

Hi there cesaroski,

and a warm welcome to these forums.

Instead of setting "margin" to the second div, set "padding" to the first div.

Hers is a basic example...

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
#first-div {
    width:760px;
    padding:20px;
    margin:auto;
    background-color:#000080;
 }
#second-div {
    padding:20px 20px 0;
    background-color:#fff;
 }
#second-div p {
    margin:0;
    padding-bottom:20px;
 }
</style>

</head>
<body>

<div id="first-div">

<div id="second-div">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
et mauris scelerisque tristique. Donec fringilla mauris dolor, 
sit amet vulputate lacus. Nulla feugiat mattis nulla non 
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
nisi eget neque tempus facilisis eu quis sapien.
</p>
</div>

</div>

</body>
</html>

coothead

**cesaroski** · 07-24-2012 11:02 AM

I tried but unfortunately it does the same thing all the content of the website gets shifted in on the right if I apply padding-left, or viceversa if I apply padding-right...

**auntnini** · 07-24-2012 06:41 PM

Are you stuck on "pixel control" of yore? Have you thought about using percentages and letting your layout adjust to different screen sizes? Such as

Code:

html { margin: 0; padding: 0; color: black; 
background:  url(miscImages/gradLeftSide.png) repeat-y left,   url(miscImages/gradRightSide.png) repeat-y right #69c;
/*aliceBlue rgb(240,248,255) #F0F8FF*/}

body { margin: 20px; padding: 0; text-align:center; color: #000033;
	background: rgba(240,248,255,0.50)  url(postOffice/Untitled-1.png) no-repeat top center; -moz-background-size:70% auto;
background-size:70% auto; }

@media only screen and (orientation:portrait)
	{ 	/* portrait mode */
	#wrap,  #showpics, #container, #footer. .textbox { width:768px; }
}

#wrap { color: #000033; margin: 20px auto; width: 95%; max-width:1000px; min-width: 200px;  position: relative;  z-index:300; background: rgba(255,255,255, 0.50);  }
#container { width: 100%; max-width:900px; min-width: 150px; position: relative; display: block; margin: auto; overflow:autopadding: 6px; background: rgba(255,255,255, 0.50); } 

#header { width: 100%; max-width:1000px; min-width:300px;  margin: 10px auto; display:block;  padding: 0; border: none; position: relative; background:transparent; clear:both; }
#header img { display: inline-block; width: 60%; max-width:950px; min-width:250px; height:auto; }

**cesaroski** · 07-25-2012 03:31 AM

Thanks to everyone, finally I managed to fix my problem by restarting the website stylesheet form scratch.

Thread: margin problem

Thread Tools

Display

margin problem

How about being "fluid" and "responsive" ?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions