What am I doing wrong? Nested DIV + float seems simple...

  • anticowboyism
  • Newbie
  • Newbie
  • anticowboyism
  • Posts: 11

Post 3+ Months Ago

I'm getting this:Image
but I want this:Image

Obviously the text is pushing down the div with the circular image. I have the image floated right and inside the p. I want the text to flow along the left side of the image, with the image resting at the top right. I'll post the code also so you can see what's going on...

Code: [ Select ]
<!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>Untitled Document</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="page_container">
 
  <div id="left_column"><img src="images/left_shadow.png" width="195" height="1024" /></div>
  <div id="main_column">
    <div id="header"><img src="images/nav_bar_top.jpg" width="635" height="32" /><img src="images/Header_Img.jpg" width="635" height="150" /></div>
    <div id="center_column"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
        <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
        </p>
    </div>
    <div id="footer"><img src="images/Flash_place.jpg" width="635" height="116" /><img src="images/footer_img.jpg" width="635" height="143" /></div>
  </div>
  <div id="right_column"><img src="images/right_shadow.png" width="194" height="1024" /></div>
 
</div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="style1.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="page_container">
  11.  
  12.   <div id="left_column"><img src="images/left_shadow.png" width="195" height="1024" /></div>
  13.   <div id="main_column">
  14.     <div id="header"><img src="images/nav_bar_top.jpg" width="635" height="32" /><img src="images/Header_Img.jpg" width="635" height="150" /></div>
  15.     <div id="center_column"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  16.         <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
  17.         <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
  18.         </p>
  19.     </div>
  20.     <div id="footer"><img src="images/Flash_place.jpg" width="635" height="116" /><img src="images/footer_img.jpg" width="635" height="143" /></div>
  21.   </div>
  22.   <div id="right_column"><img src="images/right_shadow.png" width="194" height="1024" /></div>
  23.  
  24. </div>
  25. </body>
  26. </html>
  27.  


and the css

Code: [ Select ]
@charset "utf-8";
/* Intrinsic HTML Elements */
body{
    margin:0;
    padding:0;
    background-image: url(images/rustflakes_bkgd.jpg);
}
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
 
/* Uniquely Identified Containers */
#page_container{
    margin: 0 auto;
    width: 1024px;
}
#left_column{
    width: 195px;
    float: left;
}
#main_column{
    float: left;
}
#header{
    background:#999;
    width: 635px;
}
#center_column{
    background:#FFF;
    width: 635px;
    height: 583px;
}
#footer{
    background:#999;
    width: 635px;
    clear: both;
}
#right_column{
    width: 194px;
    float: left;
}
#circle_img{
    float: right;
    width: 365px;
}
#tag_img{
    clear: right;
    float: right;
    width: 177px;
}
 
  1. @charset "utf-8";
  2. /* Intrinsic HTML Elements */
  3. body{
  4.     margin:0;
  5.     padding:0;
  6.     background-image: url(images/rustflakes_bkgd.jpg);
  7. }
  8. div{margin:0;padding:0;}
  9. h1{margin:0;padding:0;}
  10. h2{margin:0;padding:0;}
  11. h3{margin:0;padding:0;}
  12. p{margin:0;padding:0;}
  13. ul{margin:0;padding:0;}
  14. li{list-style-type:none;}
  15.  
  16. /* Uniquely Identified Containers */
  17. #page_container{
  18.     margin: 0 auto;
  19.     width: 1024px;
  20. }
  21. #left_column{
  22.     width: 195px;
  23.     float: left;
  24. }
  25. #main_column{
  26.     float: left;
  27. }
  28. #header{
  29.     background:#999;
  30.     width: 635px;
  31. }
  32. #center_column{
  33.     background:#FFF;
  34.     width: 635px;
  35.     height: 583px;
  36. }
  37. #footer{
  38.     background:#999;
  39.     width: 635px;
  40.     clear: both;
  41. }
  42. #right_column{
  43.     width: 194px;
  44.     float: left;
  45. }
  46. #circle_img{
  47.     float: right;
  48.     width: 365px;
  49. }
  50. #tag_img{
  51.     clear: right;
  52.     float: right;
  53.     width: 177px;
  54. }
  55.  


Thanks for any help!
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Absolute positioning inside relative position would be a good technique to use in this case. If you add position:relative; to #page_container in your CSS, you can use position:absolute; to position the #circle_img and #tag_img exactly where you want them to be.

Read this for a full explaination: http://css-tricks.com/absolute-position ... sitioning/

Good luck
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

simply put a
Code: [ Select ]
<div style="clear:both;"></div>
at the bottom of your container div (after the tag looking thing). The circle looks like its in the correct location to me.
  • anticowboyism
  • Newbie
  • Newbie
  • anticowboyism
  • Posts: 11

Post 3+ Months Ago

Thanks for the advice! I used the .clear div which fixed one of the issues of the container not extending down the page, since both images were floated. Then I got frustrated and just created 2 divs for text on the left side and then floated everything left so it's all stacked against each other. It seems to work, but I basically created a table out of divs, which isn't that great. I might try to use the positioning trick you mentioned instead...
  • anticowboyism
  • Newbie
  • Newbie
  • anticowboyism
  • Posts: 11

Post 3+ Months Ago

So I tried the absolute positioning, now that I sort of understand it more, but there is a weird quirk in IE6 that puts a 1px space on the right edge of the two divs I am positioning. Now that I understand more of floating I am attempting to once again float these 2 divs to the right, while having a normal flow of divs on the left for text. It works fine in Firefox, but again IE6 is giving me a headache. It's pushing the two text divs down the page rather than using normal flow around the 2 floated divs. Check out the images (I've tinted the 2 text divs so you can see what's happening):

Firefox is normal:
Image

IE6 is crap:
Image

So as you can see, the divs on the left are trying to clear the floats on the right when they should not be clearing. The code:
Code: [ Select ]
<!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>Untitled Document</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="page_container">
 
  <div id="left_column"></div>
 
  <div id="center_column">
    <div id="header">
      <div id="nav_bar_top"></div>
      <div id="header_img"></div>
    </div>
    <div id="content_area">
      <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
      <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
      <div id="main_text"></div>
      <div id="main_text2"></div>
      <div class="clear"></div>
    </div>
    <div id="footer">
      <div id="flash_holder"><img src="images/Flash_place.jpg" width="635" height="116" /></div>
      <div id="footer_img">
        <div id="footer_contact_wrapper"><p class="footer_contact">3rd Octave Theatricals   &nbsp; &nbsp; &nbsp; &nbsp;
      Los Angeles, CA 90004 &nbsp; &nbsp; &nbsp; &nbsp; </p></div>
      </div>
    </div>
  </div>
 
  <div id="right_column"></div>
  <div class="clear"></div>
</div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="style1.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="page_container">
  11.  
  12.   <div id="left_column"></div>
  13.  
  14.   <div id="center_column">
  15.     <div id="header">
  16.       <div id="nav_bar_top"></div>
  17.       <div id="header_img"></div>
  18.     </div>
  19.     <div id="content_area">
  20.       <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
  21.       <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
  22.       <div id="main_text"></div>
  23.       <div id="main_text2"></div>
  24.       <div class="clear"></div>
  25.     </div>
  26.     <div id="footer">
  27.       <div id="flash_holder"><img src="images/Flash_place.jpg" width="635" height="116" /></div>
  28.       <div id="footer_img">
  29.         <div id="footer_contact_wrapper"><p class="footer_contact">3rd Octave Theatricals   &nbsp; &nbsp; &nbsp; &nbsp;
  30.       Los Angeles, CA 90004 &nbsp; &nbsp; &nbsp; &nbsp; </p></div>
  31.       </div>
  32.     </div>
  33.   </div>
  34.  
  35.   <div id="right_column"></div>
  36.   <div class="clear"></div>
  37. </div>
  38. </body>
  39. </html>
  40.  


Code: [ Select ]
@charset "utf-8";
/* Intrinsic HTML Elements */
body{
    margin:0;
    padding:0;
    background-image: url(images/rustflakes_bkgd.jpg);
}
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
 
/* Uniquely Identified Containers */
#page_container{
    margin: 0 auto;
    width: 1024px;
    position: relative;
}
#left_column{
    width: 195px;
    height: 1024px;
    float: left;
    background-image:url(images/left_shadow.png);
}
#center_column{
    float: left;
    width: 635px;
    position: relative;
}
#header{
    background:#999;
    width: 635px;
    height: 182px;
}
#nav_bar_top{
    background-image:url(images/nav_bar_top.jpg);
    height: 32px;
}
#header_img{
    background-image:url(images/Header_Img.jpg);
    height: 150px;
}
#content_area{
    background:#FFF;
    width: 635px;
    height: 583px;
}
#circle_img{
    width: 365px;
    float: right;
}
#tag_img{
    width: 177px;
    float: right;
    clear: right;
}
#main_text{
    width: 269px;
    height: 233px;
    background: #EEE;
}
#main_text2{
    width: 457px;
    height: 350px;
    background: #DDD;
}
#footer{
    background:#999;
    width: 635px;
}
#flash_holder{}
#footer_img{
    background-image:url(images/footer_img.jpg);
    height: 143px;
    position: relative;
}
#footer_contact_wrapper{
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#right_column{
    width: 194px;
    height: 1024px;
    float: left;
    background-image:url(images/right_shadow.png);
}
 
/* Elements */
.clear{clear: both;}
.footer_contact {
    color: #FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    background-image: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    position: relative;
    bottom: 0px;
 
  1. @charset "utf-8";
  2. /* Intrinsic HTML Elements */
  3. body{
  4.     margin:0;
  5.     padding:0;
  6.     background-image: url(images/rustflakes_bkgd.jpg);
  7. }
  8. div{margin:0;padding:0;}
  9. h1{margin:0;padding:0;}
  10. h2{margin:0;padding:0;}
  11. h3{margin:0;padding:0;}
  12. p{margin:0;padding:0;}
  13. ul{margin:0;padding:0;}
  14. li{list-style-type:none;}
  15.  
  16. /* Uniquely Identified Containers */
  17. #page_container{
  18.     margin: 0 auto;
  19.     width: 1024px;
  20.     position: relative;
  21. }
  22. #left_column{
  23.     width: 195px;
  24.     height: 1024px;
  25.     float: left;
  26.     background-image:url(images/left_shadow.png);
  27. }
  28. #center_column{
  29.     float: left;
  30.     width: 635px;
  31.     position: relative;
  32. }
  33. #header{
  34.     background:#999;
  35.     width: 635px;
  36.     height: 182px;
  37. }
  38. #nav_bar_top{
  39.     background-image:url(images/nav_bar_top.jpg);
  40.     height: 32px;
  41. }
  42. #header_img{
  43.     background-image:url(images/Header_Img.jpg);
  44.     height: 150px;
  45. }
  46. #content_area{
  47.     background:#FFF;
  48.     width: 635px;
  49.     height: 583px;
  50. }
  51. #circle_img{
  52.     width: 365px;
  53.     float: right;
  54. }
  55. #tag_img{
  56.     width: 177px;
  57.     float: right;
  58.     clear: right;
  59. }
  60. #main_text{
  61.     width: 269px;
  62.     height: 233px;
  63.     background: #EEE;
  64. }
  65. #main_text2{
  66.     width: 457px;
  67.     height: 350px;
  68.     background: #DDD;
  69. }
  70. #footer{
  71.     background:#999;
  72.     width: 635px;
  73. }
  74. #flash_holder{}
  75. #footer_img{
  76.     background-image:url(images/footer_img.jpg);
  77.     height: 143px;
  78.     position: relative;
  79. }
  80. #footer_contact_wrapper{
  81.     width: 100%;
  82.     position: absolute;
  83.     bottom: 0px;
  84.     left: 0px;
  85. }
  86. #right_column{
  87.     width: 194px;
  88.     height: 1024px;
  89.     float: left;
  90.     background-image:url(images/right_shadow.png);
  91. }
  92.  
  93. /* Elements */
  94. .clear{clear: both;}
  95. .footer_contact {
  96.     color: #FFFFFF;
  97.     font-family: Geneva, Arial, Helvetica, sans-serif;
  98.     font-weight: bold;
  99.     text-align: center;
  100.     font-size: 14px;
  101.     background-image: none;
  102.     border-top-style: none;
  103.     border-right-style: none;
  104.     border-bottom-style: none;
  105.     border-left-style: none;
  106.     padding: 0px;
  107.     border-top-width: 0px;
  108.     border-right-width: 0px;
  109.     border-bottom-width: 0px;
  110.     border-left-width: 0px;
  111.     position: relative;
  112.     bottom: 0px;
  113.  


Any help is appreciated!
ps. i know the transparent .png on IE6 are not working, I just have to add the jquery plugin once the layout is solid.
  • buzzby_247
  • Beginner
  • Beginner
  • buzzby_247
  • Posts: 46

Post 3+ Months Ago

can you put up a phostop final image of what it should look like with text etc. tbh i dont think you may need all that css to position your images. in the <image> tag you can align=left or align=right. looking at your firefox final modle it appears that you need on 6 divs.

Code: [ Select ]
a div tag for the header
a div tag for the 1st image and text
a div for clearing
a div tag for the header
a div tag for the 1st image and text
a div for your footer
  1. a div tag for the header
  2. a div tag for the 1st image and text
  3. a div for clearing
  4. a div tag for the header
  5. a div tag for the 1st image and text
  6. a div for your footer


in your css you can specify a

html * {}

this will house all your global css so for instance instead of having

Code: [ Select ]
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
  1. div{margin:0;padding:0;}
  2. h1{margin:0;padding:0;}
  3. h2{margin:0;padding:0;}
  4. h3{margin:0;padding:0;}
  5. p{margin:0;padding:0;}
  6. ul{margin:0;padding:0;}
  7. li{list-style-type:none;}


have

Code: [ Select ]
html * {margin:0;padding:0;}


and only change it in the divs that matter
Moderator Remark: added code tags
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

adding an asterisk is a really bad idea if you don't know exactly what your doing since its a blanket statement that will override the margin and padding of every element (form fields, lists, tables, etc) and thats typically a huge mess from a usability standpoint.

You can simplify your code by using commas to create a list of items:
Code: [ Select ]
div, h1, h2, h3, h4, p, ul, li {margin:0; padding:0;}


but I really wouldn't recommend a blanket statement.
  • buzzby_247
  • Beginner
  • Beginner
  • buzzby_247
  • Posts: 46

Post 3+ Months Ago

actually puitting in the * was a mistake....very sorry. just having html {} or html, body{} would be fine. the 'html' would add universal styles that can be overridden when using a named div. the * will override everything and is not encouraged

cheers graphixboy

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.