Hello again. I am concerned I have not set up my site correctly and that I’ve misunderstood how divs and floats work.
Please remove the Xs from the URL.
www.medXiadispXlays.tv
On first glance this looks as I wanted it to but the problem is obvious when you click on ‘read more/less’ in the ‘welcome’ box and the column expands. You’ll see this throws the box on the right (‘top five’) out of alignment.
After some investigating I found that my boxes break very easily and I think they only look any good now by happy accident! The current order of the boxes/divs in the html seems vital (organising the left boxes together and the right boxes together throws it out also) and whenever the left hand column is longer than the right, the right column boxes seem to stick to the bottom of the boxes on the left.
Maybe I need some ‘clears’, maybe I need to start again? This is basically what I thought would work:
#wide900{
width:900px;
margin: 0px auto;
height: 100%;
}
.columnleft, .columnright {
lots of border stuff
background-color: #080808;
text-align: left;
padding: 28px;
}
.columnleft {
float: left;
width: 440px;
}
.columnright {
float: right;
width: 266px;
}
<div id=“wide900”>
<div class=“columnright”>
Content
</div><!–columnright–>
<div class=“columnleft”>
Content
</div><!–columnleft–>
</div><!–wide900–>
Thanks for any help you can offer…
