CSS - Rows issue

  • argrafic
  • Beginner
  • Beginner
  • argrafic
  • Posts: 53

Post 3+ Months Ago

Hello all,

I'm making this layout that has 4 rows, but when I want to add two "columns" to the rows it displays the wrong way. alta_izq and alta_der aren't inside the alta_1 borders.

Thanks!

CSS
Code: [ Select ]
#alta {
    width: 800px;
    padding: 2px;
    border: 1px solid #CCCCCC;
    background: #F0F0F0;
}

#alta_1 {
    padding: 3px;
    margin: 2px 0px;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
}

#alta_izq {
    width: 396px;
    float: left;
}

#alta_der {
    width: 396px;
    float: right;
}
  1. #alta {
  2.     width: 800px;
  3.     padding: 2px;
  4.     border: 1px solid #CCCCCC;
  5.     background: #F0F0F0;
  6. }
  7. #alta_1 {
  8.     padding: 3px;
  9.     margin: 2px 0px;
  10.     font: 12px Verdana, Arial, Helvetica, sans-serif;
  11.     color: #000000;
  12.     border: 1px solid #CCCCCC;
  13.     background: #FFFFFF;
  14. }
  15. #alta_izq {
  16.     width: 396px;
  17.     float: left;
  18. }
  19. #alta_der {
  20.     width: 396px;
  21.     float: right;
  22. }


HTML
Code: [ Select ]
<div id="alta">
    <div id="alta_1"></div>
    <div id="alta_1">
        <div id="alta_izq">IZQ</div>
        <div id="alta_der">DER</div>
    </div>
    <div id="alta_1"></div>
    <div id="alta_1"></div>
</div>
  1. <div id="alta">
  2.     <div id="alta_1"></div>
  3.     <div id="alta_1">
  4.         <div id="alta_izq">IZQ</div>
  5.         <div id="alta_der">DER</div>
  6.     </div>
  7.     <div id="alta_1"></div>
  8.     <div id="alta_1"></div>
  9. </div>
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

A simple fix would be to add the following to the CSS for your alta_1 div:
Code: [ Select ]
clear:both;
  • argrafic
  • Beginner
  • Beginner
  • argrafic
  • Posts: 53

Post 3+ Months Ago

thanks, but i still have the same problem... :s
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Hmm.. I tested it and it worked for me: http://macscapacity.com/ozzu/csstest/
I did have to set heights for alta_izq and alta_der because they automatically collapse to the content...

Do you have a link where you're trying to do this?

Post Information

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