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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How can I align these properly?

    I want to have two sides for this website and right now they are not lining up properly.

    This is my HTML file:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>The Mighty Peacock</title>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body>
    <div id="header">
      <img src="TheMightyPeacock.jpg" align="middle" class="border"/>
    </div>
    <hr />
    <div id="right" class="surrounding">
    	<div id="buttons">
    		<h4 class="button"><a href="contact.html">Contact Me</a></h4>
    		<h4 class="button"><a href="about.html">About Me</a></h4>
      		<h4 class="button"><a href="index.html">Home</a></h4>
    	</div>
    </div>
    <div id="left" class="surrounding">
    	<p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar nec nisi at placerat. In vehicula justo non lacus cursus, eget 						facilisis enim hendrerit. Sed urna magna, condimentum ut malesuada ut, scelerisque sagittis justo. Donec dignissim quis eros ac tincidunt. Donec semper malesuada velit, sit amet rutrum dolor consequat a. Nam viverra aliquet egestas. Sed bibendum, elit eu sagittis blandit, neque mauris sagittis purus, nec tristique velit purus at enim. Nunc pretium egestas lacinia. Mauris facilisis nulla et neque ultricies, eget vestibulum velit pretium. Donec semper lorem non urna fringilla scelerisque. Fusce et consequat enim, at dignissim eros. Integer eros ligula, semper non erat eget, tempor aliquet ante.</p>
    
    	<p align="left">Phasellus nec metus elementum, congue mi at, tempor mauris. Nunc dictum, lacus vitae consequat vehicula, eros urna eleifend ante, sit amet posuere velit mi et sem. Mauris tristique enim at aliquam feugiat. Nulla vel odio vitae nisl placerat ullamcorper at ac urna. Phasellus feugiat felis non nisl sodales, quis iaculis justo lacinia. Donec blandit hendrerit metus in tristique. Curabitur nec tortor at tellus vestibulum tempus. Nulla facilisi. Sed a mauris non dui eleifend aliquet venenatis quis lorem. Donec lacinia metus eget leo venenatis varius. Aliquam nec odio consectetur, ultricies lorem ac, condimentum tellus. Sed magna sapien, aliquet non nisi at, molestie interdum odio. In dignissim turpis at sollicitudin sollicitudin. Aenean enim massa, vulputate in varius non, luctus id quam. Proin non dolor turpis.</p>
    
    	<p align="left">Maecenas semper dignissim odio nec interdum. Morbi hendrerit orci quis sem porttitor, eget rutrum nulla egestas. Maecenas dictum urna fermentum leo consequat tempus. Morbi laoreet nibh eget urna congue, quis suscipit dui egestas. Duis fringilla ante a tellus fermentum feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent cursus mollis nisl quis lobortis. Nulla posuere sollicitudin sodales.</p>
    
    	<p align="left">Aenean elementum, risus posuere ullamcorper tempus, arcu felis porta augue, ultricies consequat augue eros eu arcu. Donec luctus venenatis aliquam. Maecenas pretium, dui at condimentum varius, nisl nunc cursus magna, ac dignissim est magna dictum metus. Etiam ac porttitor nisl. Aenean ullamcorper diam quis elit lobortis lacinia. Praesent hendrerit et tortor a imperdiet. Sed eu ornare odio. Curabitur laoreet risus lectus, at mollis massa tempus nec.</p>
    
    	<p align="left">Vivamus nec est vel nisi hendrerit fringilla ut id odio. Etiam hendrerit dignissim risus nec aliquam. Curabitur molestie, lectus sit amet iaculis consequat, neque enim tristique orci, a dignissim erat nisl non mauris. Curabitur iaculis magna quis risus elementum iaculis. Sed ac massa gravida, faucibus libero eget, posuere leo. Mauris vitae nulla molestie, vulputate arcu eu, rutrum est. Aenean venenatis fringilla felis sit amet tincidunt. Donec sed libero ultricies, mollis nulla vitae, lacinia augue.</p>
    </div>
    </body>
    </html>
    and this is my css file:
    Code:
    body {
    	background-color: #333;
    	color: #FFF;
    }
    
    #header {
    	text-align: center;
    	margin-top: 10px;
    	margin-bottom: 10px;
    }
    
    .border {
    	border: 5px solid black;
    }
    
    hr {
    	border: 3px solid black;
    	height: 0px;
    }
    
    .button {
    	height: 50px;
    	width: 100px;
    	border: 5px solid black;
    	background-color: #090;
    	color: #000;
    	line-height: 50px;
    	text-align: center;
    	float: right;
    	margin: 5px;
    }
    
    .button:hover {
    	background-color: #006;
    	color: #FFF;
    	cursor: pointer;
    }
    
    #clearText {
    	clear: both;
    }
    
    #right {
    	padding: 10px;
    	float: right;
    }
    
    #left {
    	padding: 10px;
    	float: left;
    }
    
    .surrounding {
    	border: 5px solid black;
    	background-color: #999;
    	color: #000;
    	width: 50%;
    	margin: 10px;
    }
    
    a, a:hover {
    	text-decoration: none;
    	color: black;
    }
    any and all help would be greatly appreciated! And I know the code is a bit messy... Any advice for that would be helpful as well! Thank you!

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You should learn the box model concept.

    Here's the problem. You gave your surrounding class a width of 50%. That means that your "left" and "right" div should be exactly half the size of the available area. I'm sure that's what you were expecting, and that would be true. However, you then added a 10 pixel margin. So what happens is that now, they have a 50% width with a 10 pixel margin so instead of occupying exactly half the width of the available space, they occupy MORE than that by exactly 10 pixels on each side. That's not all. You also added a 5 pixel border and a 10-pixel padding. So now, each section occupies

    50% of the available area (this by itself would make the two elements next to each other)
    + 10 pixel of padding on all sides (now they occupy too much space)
    + 5 pixel border (now even more space)
    + 10 pixel margin on all sides (And even more)

    The solution:

    1. Fix the numbers
    2. Remove the margins and add this to your surrounding class

    Code:
    box-sizing: border-box;
    Either way though, you'll have to fiddle with it to get your ideal result. And if you want to learn more about what this box-sizing does, go here: http://quirksmode.org/css/user-interface/boxsizing.html
    My signature :)


  •  

    Tags for this Thread

    Posting Permissions

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