0

I have a two-column setup, each with .col-md-6. The left <div> should have a white background and the right <div> a grey one.

They should both sit at 100% height, but the grey <div> doesn't want to stretch to the max height. I've set the parent .grey-right to relative and the child .preview-container to position: absolute. What could be wrong?

Also, even though the .preview-container looks exactly how I want it to, I just feel like I haven't done a great job coding up the HTML and CSS structure. I've had to use a selector like .low-margin as a bandaid fix. Is there a cleaner way to structure the HTML and CSS of this area?

I'm using Twitter Bootstrap CSS which I've referenced in the Fiddle.

CSS:

.grey-right {
    background: #eeeeee;
    position: relative;
}
.preview-container {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 60%;
    width: 43%;
    margin: auto;
}
.data-title.low-margin {
    margin-top: 10px;
}

HTML:

<div class="data-title low-margin">Country
    <span class="data-input country-name">USA</span>
</div>
royhowie
  • 11,075
  • 14
  • 50
  • 67
DT.DTDG
  • 765
  • 1
  • 13
  • 31
  • Bootstrap uses the following grid class [structure](http://stackoverflow.com/questions/22827689/is-using-bootstrap-offset-classes-a-correct-method-for-centering-elements/22827904#22827904). Did you mean to type that? – royhowie Apr 06 '14 at 06:25
  • Thanks @Luxelin it's so hard to see without actually seeing their fiddle. From what I see in the question though, I'm using the correct bootstrap structure with the 50% (.col-md-6) each? – DT.DTDG Apr 06 '14 at 06:28
  • 1
    Sorry, I thought I had deleted the comment. I checked afterwards and realized it was fine. – royhowie Apr 06 '14 at 06:30
  • @Luxelin: Thanks :) was a little confused there. The edit is much appreciated as well, looks much better! – DT.DTDG Apr 06 '14 at 06:32

0 Answers0