Back To Website Design Forum

overflowing content

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post November 9th, 2009, 10:10 am

I have a div that is 900px high and with auto width inside that div I have 2 divs each 900px high and 300px wide I want them to float nxt to eachother but instead one is under the othere even though that means its flowing outside of the parent div
Its better to explain with the code - so here it is.
the relevent parts only
html
Code: [ Select ]
<body>
<div id="content">
        <div class="par">
            <span class="text">
            text tag like this
            text
            </span>
            <span class="text">
            text tag like this
            text
            </span>
        </div>        
        <div class="par">
            <span class="text">
            text tag like this
            text
            </span>
            <span class="text">
            text tag like this
            text
            </span>
        </div>
</div>
</body>
  1. <body>
  2. <div id="content">
  3.         <div class="par">
  4.             <span class="text">
  5.             text tag like this
  6.             text
  7.             </span>
  8.             <span class="text">
  9.             text tag like this
  10.             text
  11.             </span>
  12.         </div>        
  13.         <div class="par">
  14.             <span class="text">
  15.             text tag like this
  16.             text
  17.             </span>
  18.             <span class="text">
  19.             text tag like this
  20.             text
  21.             </span>
  22.         </div>
  23. </div>
  24. </body>


and the css
Code: [ Select ]
#content {
float:left;
height:900px;
width:auto;
margin-left:200px;
overflow:auto;
}

.text {
display:block;
height:400px;
background:#c0c0c0;
width:600px;
margin-top:35px;
padding-left:10px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
}

.par {
width:610px;
height:900px;
float:left;
}
  1. #content {
  2. float:left;
  3. height:900px;
  4. width:auto;
  5. margin-left:200px;
  6. overflow:auto;
  7. }
  9. .text {
  10. display:block;
  11. height:400px;
  12. background:#c0c0c0;
  13. width:600px;
  14. margin-top:35px;
  15. padding-left:10px;
  16. border-top:1px solid #000;
  17. border-left:1px solid #000;
  18. border-right:1px solid #fff;
  19. border-bottom:1px solid #fff;
  20. -webkit-border-top-left-radius:20px;
  21. -moz-border-radius-topleft:20px;
  22. -webkit-border-bottom-right-radius:20px;
  23. -moz-border-radius-bottomright:20px;
  24. }
  26. .par {
  27. width:610px;
  28. height:900px;
  29. float:left;
  30. }
^__^
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 9th, 2009, 10:10 am

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 10th, 2009, 1:15 am

Code: [ Select ]
.text {
display:block;
height:400px;
background:#c0c0c0;
width:600px;
margin-top:35px;

padding-left:0px;

border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
}
  1. .text {
  2. display:block;
  3. height:400px;
  4. background:#c0c0c0;
  5. width:600px;
  6. margin-top:35px;
  8. padding-left:0px;
  10. border-top:1px solid #000;
  11. border-left:1px solid #000;
  12. border-right:1px solid #fff;
  13. border-bottom:1px solid #fff;
  14. -webkit-border-top-left-radius:20px;
  15. -moz-border-radius-topleft:20px;
  16. -webkit-border-bottom-right-radius:20px;
  17. -moz-border-radius-bottomright:20px;
  18. }
Let's leave all our *plum* where it is and go live in the jungle ...

Page 1 of 1

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 191 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
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.