Container div not working

music_fan01 · October 29, 2011

I was cleaning up my code a bit and trying to put my paragraphs and float them to the right into a div, but now my paragraphs are under my image and not to the right of my image.

* body */
body {
margin:114px 0 0 0; 
line-height:15px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
}

a { 
color:#018BC1;
}
a:hover { 
text-decoration:none;
}
#header {}
#logo { 
padding:30px 0 120px 0;
color:#fff; 
text-align:center;
}


/* logo */
#logo a{ 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:24px; 
text-transform:uppercase; 
}

/* Menu */
#menu {
color:#fff; 
text-align:center; 

}
#menu ul {
text-align:center;
list-style:none; 
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a { 
font-weight:bold; 
font-size:14px; 
text-decoration:none; 
color:#fff; 
background-color:#445d6c; 
padding:0 10px 2px 10px;
}
#menu ul a:hover 
{ 
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;

}
#content {
width: 780px; 
margin:0 auto;
overflow:hidden;
margin-bottom:3cm;
}

/* Text */
#text {
    float: right;
    width: 760px;
    margin-top:1cm;
}
#text p {
margin:7px 0 7px 0;
}

#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
margin:30px 0 0 0; 
padding:5px 0 7px 45px; 
text-transform:uppercase; 
font-size:25px; color:#fff; 
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}

/* Footer */

#footer {
background:url(images/footer_bckg.jpg) no-repeat top center; 
height:102px; clear:both; 
width:780px; 
margin:0 auto; 
}
#left_footer {
float:left;
padding:60px 0 0 30px; 
color:#fff; font-size:12px;
}
#left_footer a { 
color:#fff;
}
#left_footer a:hover { 
text-decoration:none;
}
#right_footer { 
float:right;  
padding:60px 30px 0 0; 
color:#fff;  
font-size:12px; text-align:right;
}
#right_footer a { 
color:#fff;
}
#right_footer a:hover { 
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px

}

/* gallery */
    .row img {
        margin: 2px;
        border: 1px solid #0000ff;
        clear: both;
        width: 100px;
        height: 90px;
        margin-left:3px;
    }
     
    .first
    {
        float: right;
        text-align: center;
    } 
         
    .last {
        border: 1px solid #ffffff;
        float: right;
    }
     
    .desc
    {
        text-align: center;
        font-weight: normal;
        width: 120px;
        margin: 10px;
    }


/* image */
#image {
width: 400px;
}
img.floatLeft { 
    float: left; 
    margin: 4px;
}

/* paragraphs */
#p {
    float: left;  
    margin-right: 4px;
    padding-left: 20px;
    font-size:12pt;
}

/* Divider */
#div {
float: right; 
width: 20px; 
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}
#container {
margin: 20px auto 900px auto;
width: 1000px;
}
aside {
width: 400px;
float: left;
}
section {
margin: 0;
padding: 0 0 20px 0;
overflow: auto;
text-align: left;
}
p {
margin: 0 50px 10px;
text-indent: 20px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


    <!-- header -->
    <div id="header">
        <div id="logo"><a href="#">Header</a></div>
        <div id="menu">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">contact</a></li>
        <li><a href="#">Guestbook</a></li>
            
                  </ul>
<img src="images/twitter.png" height="49px;"/>

   
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Blank</strong></h1>
</div>

<img src="images/test.jpg" class="floatLeft" width="360px;" height="332px;"/>

<div id=""container">
<aside>
<h2>Header for paragraph 1</h2>
  <p>Test
     </p>
</aside>
<section>
<h2>Header for paragraph 2</h2>
<p>Test</p>
</section>

</div>
</div>


           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->



</body>
</html>

sunfighter · October 29, 2011

in your html, this line:

has one too many quotes.

music_fan01 · October 29, 2011

Got it. It works now, but my paragraphs are on top of each other when I am trying to get them side by side.

sunfighter · October 30, 2011

music_fan01,

You are using <aside> and <section> tags. These are new in HTML5 only. Your doc is XHTML 1.0 Transitional and it does not recognize these tags. Even if you were using HTML5, these tags just mark a section of text; you are trying to use them to style your code. Can't be done. So, lets make those sections divs and use the names aside and section as the ID identifiers.

<div id="aside">
<h2>Header for paragraph 1</h2>
  <p>Test
     </p>
</div>
<div id="section">
<h2>Header for paragraph 2</h2>
<p>Test</p>
</div>

Now we can style them. Set aside and section as an ID by adding the # mark and them Most Impotantly add float:left to #section

#aside {
width: 400px;
float: left;
}
#section {
margin: 0;
padding: 0 0 20px 0;
overflow: auto;
text-align: left;
float:left;  // <== ADD THIS!!
}

Now play with the styling to get things the way you want.

music_fan01 · October 31, 2011

Thanks for the help!

Sign In

Container div not working

Recommended Posts

music_fan01

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information