Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Margin problems

  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,234
    Thanks
    51
    Thanked 100 Times in 99 Posts

    Margin problems

    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

    PHP Code:
    <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"
    Code:
    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;
    }
    Attached Thumbnails Attached Thumbnails Margin problems-margins.jpg  
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    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.

    Code:
    <div id="wrapper">
        <!--PUT ALL YOUR CONTENT HERE-->
    </div>
    Style it like this:
    Code:
    #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.
    Last edited by LearningCoder; 11-27-2012 at 07:50 PM.

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,234
    Thanks
    51
    Thanked 100 Times in 99 Posts
    Let me give this a try, I normally use center in the css, but got lazy.
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •