...

View Full Version : Margin problems



myfayt
11-27-2012, 05:48 PM
On my home screen with a different screen resolution it looks fine, but on my work computer it's messed up.

I want the about us box to be left aligned with the menu and not go past it, and the same for the advertising box to be right aligned.

I used margin-left: 40px; but it messes up for different screen sizes.

Any ideas? Thank you


<body>
<div id="header" class="container">

</div>
<div id="menu" class="container">
<ul>
<li><a href="index.html" accesskey="1" title="">Home</a></li>
<li class="current_page_item"><a href="aboutus.html" accesskey="1" title="">About</a></li>
<li><a href="#" accesskey="2" title="">List Your Business</a></li>
<li><a href="#" accesskey="3" title="">Search Businesses</a></li>
<li><a href="#" accesskey="4" title="">Contact Us</a></li>
<li><a href="#" accesskey="5" title="">Sitemap</a></li>
<li><a href="login.php" accesskey="6" title="">Login</a></li>
</ul>
</div>

<div id="content2" class="container">
<center><h2>About Us</h2></center>

<p><h3>Coming Soon...</h3></p>
</div>
<div id="sidebar3">
<div>
<center><h2>Sponsors</h2></center>
<p><center><img src="images/ad.jpg"></center></p>
</div>
</div>
</div>
<div id="footer">


html, body {

}

body {
margin: 0px;
padding: 0px;
background-image: url(images/clouds.jpg);
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8C8C8C;
}

h1, h2, h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: 300;
font-family: 'Open Sans Condensed', sans-serif;
color: #2D2D2D;
}

h2 {
padding: 0px 0px 30px 0px;
font-size: 2.50em;
}

p, ol, ul {
margin-top: 0px;
}

p {
line-height: 180%;
}

strong {
}

a {
color: #861004;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.border {
}

img.alignleft {
float: left;
}

img.alignright {
float: right;
}

img.aligncenter {
margin: 0px auto;
}

hr {
display: none;
}

/** WRAPPER */

#wrapper {
}

.container {
width: 1200px;
margin: 0px auto;
}

.clearfix {
clear: both;
}

/** HEADER */

#header {

height: 10px;

}


/** MENU */

#menu {

height: 50px;
background: #000000;
}

#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline-block;
}

#menu a {
display: block;
padding: 0px 30px 0px 30px;
line-height: 50px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
font-weight: 200;
color: #FFFFFF;
border: none;
}

#menu a:hover, #menu .current_page_item a {
background: #D1D1D1;
text-decoration: none;
color: #000000;
}

#menu .current_page_item a {
}

#menu .last {
border-right: none;
}

/** PAGE */

#page {
overflow: hidden;
padding: 50px 0px 40px 0px;
}

/** CONTENT */

#content {
float: left;
width: 620px;
background: #FFFFFF;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

#content p {
margin-left: 5px;
margin-right: 5px;
color: #000000;
}

#content2 {
float: left;
width: 900px;
background: #FFFFFF;
margin-left: 40px;
margin-top: 20px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

#content3 {
float: left;
width: 1200px;
background: #FFFFFF;
margin-left: 40px;
margin-top: 20px;

}

#content3 h2 {
text-align: center;
}

/** SIDEBAR 1 */

#sidebar1 {
float: left;
width: 280px;
margin-right: 10px;

}

#sidebar1 #box1 {
margin-bottom: 30px;
background: #BCD2EE;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

#sidebar1 #box1 a {
font-size: 14px;
text-decoration: none;
color: #000000;
margin-left: 5px;
margin-right: 5px;
}

#sidebar1 #box1 li {
margin-left: 5px;
margin-right: 5px;
}

#sidebar1 #box1 h2 {
margin-left: 5px;
margin-right: 5px;
text-align: center;
}

/** SIDEBAR 2 */

#sidebar2 {
float: right;
width: 280px;
background: #BCD2EE;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

#sidebar2 h2 {
text-align: center;
}

#sidebar2 p {
margin-right: 3px;
margin-left: 3px;
}

#sidebar3 {
float: right;
width: 280px;
background: #BCD2EE;
margin-right: 40px;
margin-top: 20px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

/* Footer */

#footer {
overflow: hidden;
padding: 10px 0px 10px 0px;
background: #000000;
position: absolute;
bottom: 0;
width:100%;
}

#footer p {
text-align: center;
font-size: 16px;
}

#footer a {
}

/* List style 1 */

ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}

ul.style1 li {
padding: 10px 0px 15px 0px;

}

ul.style1 .first {
padding-top: 0px;
border-top: none;
}

/* List style 2 */

ul.style2 {
margin: 0px;
padding: 0px;
list-style: none;
}

ul.style2 li {
padding: 25px 0px 15px 0px;
border-top: 1px solid #E6E7DC;
}

ul.style2 .first {
padding-top: 0px;
border-top: none;
}

ul.style2 h3 {
padding: 0px 0px 10px 0px;
font-size: 1.50em;
}

ul.style2 h3 a {
color: #101010;
}

ul.style2 a {
text-decoration: none;
}

ul.style2 a:hover {
text-decoration: underline;
}


/* List style 3 */

ul.style3 {
margin: 0px;
padding: 0px;
list-style: none;
}

ul.style3 li {
padding: 20px 0px 20px 0px;
border-top: 1px solid #E6E7DC;
}

ul.style3 p {
margin: 0px;
padding: 0px;
}

ul.style3 img {
float: left;
margin-top: 3px;
margin-right: 20px;
}

ul.style3 .posted {
padding: 10px 0px 10px 0px;
font-size: 8pt;
color: #A2A2A2;
}

ul.style3 .first {
padding-top: 0px;
border-top: none;
}

.link-style {
display: inline-block;
margin-top: 20px;
padding: 7px 20px;
background: #0C73D4;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}

LearningCoder
11-27-2012, 08:41 PM
You missed a closing tag for the footer.

To get your 'about us' header to align left, take your <center></center> tags out as you should not be using them even if you did want something centered. This puts the header to the left in the div.

To tackle the other problem, stick all your content inside a 'wrapper', set the width then set margin to auto. This way, whenever you float anything left or right, it should always line up with your header and keep everything together.



<div id="wrapper">
<!--PUT ALL YOUR CONTENT HERE-->
</div>


Style it like this:


#wrapper {width: 90%;
margin: 0 auto;}

//also, set your header, menu and #content and #footer divs to 100% width.


Hope it helps.

Kind regards,

LC.

myfayt
11-27-2012, 11:08 PM
Let me give this a try, I normally use center in the css, but got lazy.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum