Container div problem

Page 1 of 1

9 Replies - 360 Views - Last Post: 30 October 2011 - 04:28 PM

#1 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Container div problem

Posted 28 October 2011 - 07:47 PM

I was cleaning up my code a bit and trying to put my paragraphs into my div container and float them to the right, but in doing so, my paragraphs ended up under my image not to the right of the 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">&copy; 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>


Is This A Good Question/Topic? 0
  • +

Replies To: Container div problem

#2 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: Container div problem

Posted 28 October 2011 - 07:53 PM

Can you show us an image of the issue. It's kind of hard to link your description to where in your code you're talking about.
Was This Post Helpful? 0
  • +
  • -

#3 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Container div problem

Posted 29 October 2011 - 05:30 PM

Posted Image

I fixed my problem, I one more double quote than I should've. Now that I've got that problem fixed, my paragraphs are both underneath each other when they are suppose to be side by side.
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: Container div problem

Posted 29 October 2011 - 05:41 PM

I assume you're trying to float three things? If so try this arrangement:

<div style="float: left;">
	<!-- image -->
</div>

<div style="float: right;">
	<div style="float: left;">
		<!-- text -->
	</div>
	
	<div style="float: right;">
		<!-- text -->
	</div>
</div>

<!-- next div -->

<div style="clear: both;">

</div>


Do note that's a very minimal way of doing it. I would suggest that you put the styles in a stylesheet. Perhaps a .right, .left, .group for those three stylings :)
Was This Post Helpful? 0
  • +
  • -

#5 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Container div problem

Posted 29 October 2011 - 07:55 PM

This how I ended up doing it, which looks similar to the code that you posted. I kept my styling and floats in my css instead of my html.

<div id="columns">
    <div class="left column">      
      <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
     
    </div>
    <div class="right column">
        <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
    </div>
</div>




/* Columns */
  #columns {
        width: 775px;
    }

    #columns .column {
        position: relative;
        width: 600px;
       padding: 9px;
        
    }

    #columns .left {
        float: left;
	width:170px;
    }

    #columns .right {
        float: right;
	width:170px;
    }

Was This Post Helpful? 0
  • +
  • -

#6 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: Container div problem

Posted 29 October 2011 - 07:58 PM

Make sure to put clear: both; on the next element or use a clear fix, the one I use:
/* self clearing floats */

.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


If you use that form of clearing then you apply .group to the first div.

This post has been edited by EnvXOwner: 29 October 2011 - 07:58 PM

Was This Post Helpful? 0
  • +
  • -

#7 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Container div problem

Posted 29 October 2011 - 08:24 PM

Is this how I would apply it?

<div id="columns" class="group">
    <div class="left column">      
      <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
     
    </div>
    <div class="right column">
        <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
    </div>
</div>


Is this how I would apply it?

<div id="columns" class="group">
    <div class="left column">      
      <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
     
    </div>
    <div class="right column">
        <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
    </div>
</div>

Was This Post Helpful? 0
  • +
  • -

#8 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: Container div problem

Posted 29 October 2011 - 08:25 PM

Yup, that's exactly how you would apply it :)
Was This Post Helpful? 0
  • +
  • -

#9 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Container div problem

Posted 30 October 2011 - 04:07 PM

Thanks for the help! :)
Was This Post Helpful? 0
  • +
  • -

#10 EnvXOwner  Icon User is offline

  • PHP Brogrammer
  • member icon

Reputation: 355
  • View blog
  • Posts: 2,314
  • Joined: 10-August 09

Re: Container div problem

Posted 30 October 2011 - 04:28 PM

Anytime.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1