CSS Layout Help

sirichmond · 14 Jun 2011 at 15:58

Afternoon all,

Been working on my new site and have a prolem I cannot solve at the moment.

http://www.allthegearnoidea.net/CSSHELP/diary/0611.html

If you check the link you will see what I mean. I have photos on the left against a semi transparent bkg, and the text on the right again with bkg. How do I get it so that the div on the right is the same height as the one on the left?

This page will have more entries so for next ride will be more text below current and more pics below current. At the moment I have a container div that holds all info then a left for pics and right for text.

Any help greatly appreciated.

Simon

sirichmond · 14 Jun 2011 at 17:43

Thanks, done that but still no joy, suspect I'm doing something worng.

Have put the following into my style sheet

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

and have changed my divs so they are now

<div id="rightcontent" class="clearfix">
info
<div>
<div id="leftcontent" class="clearfix">
info
<div>

The following is my css for the left and right content all enclosed in a container div

#leftcontent {
float:left;
margin-top: 5px;
margin-bottom: 5px;
width: 180px;
text-align:justify;
padding: 10px;
background-image:url(../images/backgrounds/blackbkg.png);
}

#rightcontent {
float:right;
margin-top: 5px;
margin-bottom: 5px;
width: 470px;
max-height: 100%;
text-align:justify;
padding: 10px;
background-image:url(../images/backgrounds/blackbkg.png);
}

what have i done wrong, sorry to be a pain in the butt

Si

sirichmond · 15 Jun 2011 at 15:45

With fresh eyes I have sorted it just using the images and setting the "vspace" so the left columns are as long as the right, crude but works simply.

http://www.allthegearnoidea.net/CSSHELP/diary/0611.html

sirichmond · 15 Jun 2011 at 20:44

Yeah if you dont mind, looks OK in my firefox but I have 3.6, will have to download latest version

sirichmond · 15 Jun 2011 at 20:48

I see what you mean now, blast

sirichmond · 15 Jun 2011 at 21:04

Same in IE9 having just downloaded that, thats all my hard work up the spount. Enough for tonight I think

sirichmond · 16 Jun 2011 at 06:50

Thanks for that I will have a look when I get home from work.
Cheers
Simon

sirichmond · 16 Jun 2011 at 09:34

Just had a quick look on my break and thanks again for all your hard efforts, I like the simplicity of the nav now. The only thing I can comment on is the right colum is still around 5mm shorter than the left. Also I had split the right colum in two originally so that the pictures from ride 1 are next to the text from ride 1 and 2 next to 2 and so on. Originally I had it set out similar with one long right hand colum for images but it did not quite feel right to me.

Also whats the idea of a CSS reset sheet, I'm new to CSS as you can probably tell.

Many Thanks Again
Simon

PS: I have yet to join the skype revolution

sirichmond · 16 Jun 2011 at 10:14

Yeah if you don't mind then I will have a look this aft and work it all out before I bother u again
Thanks again

sirichmond · 16 Jun 2011 at 15:20

Ok thanks for that and sorry for increasing your workload.
Simon