www.webdeveloper.com
Results 1 to 3 of 3

Thread: Content Pushed Down?

  1. #1
    Join Date
    Jul 2006
    Posts
    77

    Content Pushed Down?

    The content in my #rightside container is being pushed down the screen and doesn't start until the #leftside container ends. I know I can do it but using negative margins but is there a better way?
    LINK: http://mikegreenia.biz/dotbiz/

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mikegreenia.biz</title>
    <link rel="stylesheet" type="text/css" href="dotbiz-styles.css" />
    </head>
    
    <body>
    <div id="topline"></div>
    <div id="container">
    <a href="index.html"><img src="dotbiz-banner.gif" alt="mikegreenia.biz" /></a>
    <br /><br />
        <div class="box">
            <div class="top"></div>
            <h2>I'm a <a href="web.html">website designer</a>, 
                sports <a href="sports.html">fanatic</a>, 
                and a <a href="blogger.html">blogger</a> in my free time. I am Mike Greenia.</h2>
            <div class="bottom"></div>
        </div>
    <br />
        <div class="contbox">
            <div class="top"></div>
            <div id="leftside">
    		<h1>h1 header</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sollicitudin elit placerat enim scelerisque sagittis. In 		
            luctus luctus velit. Praesent vulputate posuere mi. Nam elementum purus vitae est. Donec imperdiet, augue vitae aliquet 
            scelerisque, nulla mauris tempus magna, eu consectetuer elit libero ac ante. Integer dictum pede gravida purus. Proin massa 
            ipsum, vulputate in, vehicula id, consequat eget, lorem. Aenean vitae tellus. Lorem ipsum dolor sit amet, consectetuer 
            adipiscing elit. Suspendisse dui. Vivamus id velit.</p>
    
            </div>
            <div id="rightside">
            <img src="http://www.315webdesign.com/img/mikegreenia.jpg" alt="My Blog" />
            </div>
            <div class="bottom"></div>
        </div>
    </div>
    </body>
    </html>
    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
    	padding: 0;
    	margin: 0;
    }
    
    body {
    	background-color:#666666;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    
    img {
    	border: none;
    }
    
    a {
    	border: none;
    }
    
    h1 {
    	color: #CCCC33;
    }
    
    h2 {
    	color:#FFFFFF;
    	text-align:center;
    }
    
    h2 a {
    	text-decoration:underline;
    	color:#FFFFFF;
    }
    
    h2 a:hover {
    	text-decoration:none;
    	color: #33CCCC;
    }
    
    p {
    	padding:3px;
    }
    
    #topline {
    	padding: 0;
    	margin: 0;
    	border-top: 12px solid #33CCCC;
    	width:100%;
    }
    
    #container {
    	margin: 70px auto;
    	width:650px;
    	height:400px;
    }
    
    .box {
    	width: 590px;
    	padding: 0 20px;
    	background-image: url(mid.gif);
    }
    .box .top {
    	height: 16px;
    	font-size: 1px;
    	margin: 0 -20px;
    	background-image: url(top.gif);
    }
    .box .bottom {
    	height: 15px;
    	font-size: 1px;
    	margin: 0 -20px;
    	background-image: url(bottom.gif);
    }
    
    .contbox {
    	width: 590px;
    	padding: 0 20px;
    	background-image: url(mid.gif);
    }
    .contbox .top {
    	height: 16px;
    	font-size: 1px;
    	margin: 0 -20px;
    	background-image: url(top.gif);
    }
    .contbox .bottom {
    	height: 15px;
    	font-size: 1px;
    	margin: 0 -20px;
    	background-image: url(bottom.gif);
    	clear:both;
    }
    
    #leftside {
    	width: 300px;
    }
    
    #rightside {
    	float:right;
    }

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Float the left side left :
    Code:
    #leftside {
    	width: 300px;
    	float:left;
    }

  3. #3
    Join Date
    Jul 2006
    Posts
    77
    Quote Originally Posted by Centauri
    Float the left side left :
    Code:
    #leftside {
    	width: 300px;
    	float:left;
    }
    ha I swore I tried that and it didn't work. Thanks though, looks good now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles