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 to the CF scene
    Join Date
    Apr 2011
    Location
    TX, USA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning divs and repeating backgrounds

    Hello all, I am relatively new to CSS, although I have been dabbling with HTML for some time now. I am having trouble with the positioning of a few divs I have inside a wrapper div. I am also having some issues with the background image repeating in the y-axis in two divs that I have bordering my site.

    In the wrapper div, I have three divs that I would like positioned with #news and #blog on one side (stacked on top of each other, with each taking up half the width and half the height), and #content on the opposite side (taking up the other half of the width, and the full height of the wrapper). I have been able to work out a solution, but it only works if the content in #content takes up a certain amount of space. Otherwise, #blog falls in underneath #content. Is there a way to solve this?

    As for the background images, I have two divs (#bgright and #bgleft) absolutely positioned to the right and left sides of the site, respectively. My CSS tells the background image to repeat in the Y-axis, but they do not when the content inside my wrapper extends beyond them.

    Thank you in advance for any help you have to offer!

    My HTML:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Southpaw Media/Designs</title>
    <link href="index.css" type="text/css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="bgright">&nbsp</div>
    <div id="bgleft">&nbsp</div>
    
    <div id="navparent">
    	<div id="navbar">
    		<ul> 
    		<li><a class="selected" href="#home">Home</a></li> 
    		<li><a href="#compmaint">Computer Maintenance</a></li>
    		<li><a href="#netdes">Network Design</a></li> 
    		<li><a href="#portfolio">Portfolio</a></li>
    		<li><a href="#contact">Contact</a></li>
    		</ul> 
    	</div>
    </div>
    
    <div id="body">
    	<div id="news">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam metus lorem, tincidunt ac ornare vel, hendrerit vitae justo. Praesent luctus, dolor vitae elementum ornare, mauris mi porttitor justo, at lobortis enim nibh a leo. Cras nibh mauris, sagittis a posuere eu, molestie nec nisi. Aenean sapien dui, aliquet sit amet pretium in, aliquet sit amet est. Duis ligula sem, iaculis ut porttitor ac, tempus et arcu. Duis quam leo, lacinia varius euismod et, tempus non magna. Nam eu felis dui. Aliquam vel lorem est. Curabitur pellentesque dolor nec nulla molestie placerat. Cras eleifend imperdiet ante sed euismod. Nunc volutpat lobortis felis, in feugiat purus imperdiet sed. Vivamus nisl enim, sagittis quis eleifend sit amet, interdum at sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et libero purus. Etiam vulputate ligula a ante lacinia ac mollis quam ultricies. Quisque euismod adipiscing cursus. Quisque lobortis vehicula libero, vel eleifend augue facilisis aliquet. Maecenas faucibus venenatis iaculis.
    
    Nulla porttitor, nulla vulputate cursus pellentesque, elit leo venenatis tortor, ac auctor urna lorem vel mauris. Aliquam interdum ultricies justo eget tempus. Morbi sed elit vitae lorem fermentum mattis a sagittis mauris. In suscipit bibendum varius. Donec lacinia mauris in sapien congue a semper nisl molestie. Etiam ut diam quis elit facilisis lobortis. Ut at rhoncus orci. Ut eu magna nisi, eget vulputate arcu. Vivamus hendrerit elit nec velit condimentum vel dapibus lectus auctor. Proin non leo nec elit posuere suscipit eu vitae massa. Proin egestas tincidunt dignissim. Fusce suscipit, lectus non tincidunt accumsan, mauris diam fermentum lectus, nec congue metus neque eget turpis. Suspendisse porttitor tempor nisi fermentum ullamcorper. Etiam viverra sapien vel odio ultrices ac mattis sapien dignissim. Nunc eget elit tellus, lacinia fringilla nibh. Donec euismod nulla ac justo dictum placerat. Mauris quis magna non arcu facilisis sollicitudin vel sit amet arcu. </p>
    	</div>
    
    
    	<div id="content"> 
    		<h3>Content Container</h3> 
    		<span> 
    		<div id="home"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam metus lorem, tincidunt ac ornare vel, hendrerit vitae justo. Praesent luctus, dolor vitae elementum ornare, mauris mi porttitor justo, at lobortis enim nibh a leo. Cras nibh mauris, sagittis a posuere eu, molestie nec nisi. Aenean sapien dui, aliquet sit amet pretium in, aliquet sit amet est. Duis ligula sem, iaculis ut porttitor ac, tempus et arcu. Duis quam leo, lacinia varius euismod et, tempus non magna. Nam eu felis dui. Aliquam vel lorem est. Curabitur pellentesque dolor nec nulla molestie placerat. Cras eleifend imperdiet ante sed euismod. Nunc volutpat lobortis felis, in feugiat purus imperdiet sed. Vivamus nisl enim, sagittis quis eleifend sit amet, interdum at sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et libero purus. Etiam vulputate ligula a ante lacinia ac mollis quam ultricies. Quisque euismod adipiscing cursus. Quisque lobortis vehicula libero, vel eleifend augue facilisis aliquet. Maecenas faucibus venenatis iaculis.
    
    Nulla porttitor, nulla vulputate cursus pellentesque, elit leo venenatis tortor, ac auctor urna lorem vel mauris. Aliquam interdum ultricies justo eget tempus. Morbi sed elit vitae lorem fermentum mattis a sagittis mauris. In suscipit bibendum varius. Donec lacinia mauris in sapien congue a semper nisl molestie. Etiam ut diam quis elit facilisis lobortis. Ut at rhoncus orci. Ut eu magna nisi, eget vulputate arcu. Vivamus hendrerit elit nec velit condimentum vel dapibus lectus auctor. Proin non leo nec elit posuere suscipit eu vitae massa. Proin egestas tincidunt dignissim. Fusce suscipit, lectus non tincidunt accumsan, mauris diam fermentum lectus, nec congue metus neque eget turpis. Suspendisse porttitor tempor nisi fermentum ullamcorper. Etiam viverra sapien vel odio ultrices ac mattis sapien dignissim. Nunc eget elit tellus, lacinia fringilla nibh. Donec euismod nulla ac justo dictum placerat. Mauris quis magna non arcu facilisis sollicitudin vel sit amet arcu. </p></div>
    
    		<div id="compmaint"><p>You're not impressed?</p></div>
    
    		<div id="netdes"><p>But it's so cool... in a nerdy way.</p></div>
    
    		<div id="portfolio">
    			<div class="idTabs">
    			<a class="selected" href="#audiovideo"><p>AudioVideo's Facebook</a> 
    			<a href="#img2">2</a> 
    			<a href="#img3">3</a> 
    			<a href="#img4">4</a> 
    			
    			<div id="audiovideo"><img src="http://www.sunsean.com/images/symbol/_brace.png"></div> 
    			<div id="img2"><img src="http://www.sunsean.com/images/symbol/_lambda.png"></div>
    			<div id="img3"><img src="http://www.sunsean.com/images/symbol/_beta.png"></div>
    			<div id="img4"><img src="http://www.sunsean.com/images/symbol/_paren.png"></div>
    			</div>
    
    			<script type="text/javascript"> 
    			  $(".imagebox").idTabs("!mouseover"); 
    			</script>
    		</div>
    
    		<div id="contact"><p>This tests the contact tab</p></div>
    		</span>
    	</div>
    	
    	<div id="blog">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam metus lorem, tincidunt ac ornare vel, hendrerit vitae justo. Praesent luctus, dolor vitae elementum ornare, mauris mi porttitor justo, at lobortis enim nibh a leo. Cras nibh mauris, sagittis a posuere eu, molestie nec nisi. Aenean sapien dui, aliquet sit amet pretium in, aliquet sit amet est. Duis ligula sem, iaculis ut porttitor ac, tempus et arcu. Duis quam leo, lacinia varius euismod et, tempus non magna. Nam eu felis dui. Aliquam vel lorem est. Curabitur pellentesque dolor nec nulla molestie placerat. Cras eleifend imperdiet ante sed euismod. Nunc volutpat lobortis felis, in feugiat purus imperdiet sed. Vivamus nisl enim, sagittis quis eleifend sit amet, interdum at sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et libero purus. Etiam vulputate ligula a ante lacinia ac mollis quam ultricies. Quisque euismod adipiscing cursus. Quisque lobortis vehicula libero, vel eleifend augue facilisis aliquet. Maecenas faucibus venenatis iaculis.
    
    Nulla porttitor, nulla vulputate cursus pellentesque, elit leo venenatis tortor, ac auctor urna lorem vel mauris. Aliquam interdum ultricies justo eget tempus. Morbi sed elit vitae lorem fermentum mattis a sagittis mauris. In suscipit bibendum varius. Donec lacinia mauris in sapien congue a semper nisl molestie. Etiam ut diam quis elit facilisis lobortis. Ut at rhoncus orci. Ut eu magna nisi, eget vulputate arcu. Vivamus hendrerit elit nec velit condimentum vel dapibus lectus auctor. Proin non leo nec elit posuere suscipit eu vitae massa. Proin egestas tincidunt dignissim. Fusce suscipit, lectus non tincidunt accumsan, mauris diam fermentum lectus, nec congue metus neque eget turpis. Suspendisse porttitor tempor nisi fermentum ullamcorper. Etiam viverra sapien vel odio ultrices ac mattis sapien dignissim. Nunc eget elit tellus, lacinia fringilla nibh. Donec euismod nulla ac justo dictum placerat. Mauris quis magna non arcu facilisis sollicitudin vel sit amet arcu. </p>
    	</div>
    
    </div>
    
    <script type="text/javascript" >
      $("#navbar").idTabs(function(id,list,set){ 
        $("a",set).removeClass("selected") 
        .filter("[href='"+id+"']",set).addClass("selected"); 
        for(i in list) 
          $(list[i]).hide(); 
        $(id).fadeIn(); 
        return false; 
      }); 
    </script>
    </body>
    </html>
    My CSS:
    Code:
    body {
    	background-color: #a3a3a3;
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	color: #2F26C6;
    	}
    
    #clearfix {
    	clear: both;
    	}
    
    #body {
    	margin: 0px auto;
    	width: 80%;
    	background-color: #fff;
    	overflow: hidden;
    	}
    
    #navparent {
    	position: fixed;
    	bottom: 0px;
    	width: 100%;
    	}
    
    #navbar {
    	width: 500px;
    	margin: 0px auto;
    	}
    
    #bgright {
    	position: absolute;
    	right: 0;
    	top: 0;
    	height: 100%;
    	width: 120px;
    	background-image: url(Images/BackgroundRight.png);
    	background-repeat: repeat-y;
    	}
    
    #bgleft {
    	position: absolute;
    	left: 0;
    	top: 0;
    	height: 100%;
    	width: 120px;
    	background-image: url(Images/BackgroundLeft.png);
    	background-repeat: repeat-y;
    	}
    
    #news {
    	float: left;
    	width: 50%;
    	}
    
    #blog {
    	float: left;
    	width: 50%;
    	}
    
    #content {
    	float: right;
    	width: 50%;
    	min-height: 100%;
    	}
    
    #portfolio li {
    	/*Change so that it is normal*/
    	}
    
    li {
    	list-style-type: none;
    	display: inline;
    	}
    Please feel free to e-mail me if you need any more information!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello philipradams,
    When you absolute position #bgleft and #bgright off by themselves like that they are removed from the normal flow of the document and #body has no influence on their height. Instead, your 100% height makes them the height of the viewport, but only one time.

    Instead, if you nest #bg's left/right with #body inside them then #body can control their height.

    Your content divs inside of #body just need floated correctly to get them in the right place. You will still need to search out a solution for the 50% height as I did not address that in this post.

    Give this a try -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Southpaw Media/Designs</title>
    <style type="text/css">
    body {
    	margin: 0;
    	background: #a3a3a3;
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	color: #2F26C6;
    }
    #bgleft {
    	width: 100%;
    	background: url(Images/BackgroundLeft.png) repeat-y left;
    }
    #bgright {
    	width: 100%;
    	background: url(Images/BackgroundRight.png) repeat-y right;
    }
    #body {
    	margin: 0 120px;
    	background: #fff;
    	overflow: hidden;
    }
    	#navparent {
    		position: fixed;
    		bottom: 0;
    		width: 100%;
    	}
    		#navbar {
    			width: 500px;
    			margin: 0 auto;
    		}
    			#navbar ul li {
    				list-style-type: none;
    				display: inline;
    				font-size: 0.8em;
    			}
    #news {
    	width: 50%;
    	float: left;
    	background: #ccc;
    }
    #blog {
    	width: 50%;
    	float: left;
    	clear: left;
    	background: #c96;
    }
    #content {
    	margin: 0 0 0 50%;
    	background: #f00;
    }
    </style>
    </head>
    <body>
        <div id="bgright">
            <div id="bgleft">
                <div id="navparent">
                    <div id="navbar">
                        <ul>
                            <li><a class="selected" href="#home">Home</a></li>
                            <li><a href="#compmaint">Computer Maintenance</a></li>
                            <li><a href="#netdes">Network Design</a></li>
                            <li><a href="#portfolio">Portfolio</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
        <div id="body">
            <div id="news">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end news--></div>
            <div id="blog">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end blog--></div>
            	<div id="content">
                    <h3>Content Container</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                <!--end content--></div>
        <!--end body--></div>
            <!--end bgright--></div>
        <!--end bgleft--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    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
    •