CSS Layout Help

sirichmond

sirichmond

sirichmond

Associate
Joined
25 Apr 2007
Posts
139
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
 
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
 
Personally I'd leave it as it is, I think it looks better than it would with empty space inside the column.

You could do it with faux columns, but they're nasty things to work with IMO.
 
I don't find faux columns nasty to work with at all, quite the opposite really. However, I do agree that it would probably look best to leave as is. Once you have more posts up, it'll look fine.
 
I'll be free in 20mins, if you want to add me to Skype, I can tell you how to sort it out. Won't take long. I'll send you my Skype name via Trust.

Edit: Scratch that, you don't have your trust set up. My skype name is the same as my forum name.
 
Here you go mate.
It was easier just to redo the whole thing for you, which is what I've done. If I were you, I'd take the chance to go through it all and see how I've done everything and then figure out why I've done it the way I have. If you have any questions, feel free to ask me.

- Works in all browsers
- Is valid
- I replaced all your mouseover javascript with proper CSS.
- Your nav now uses sprites so not only does the change happen seamlessly, but google will also see the text links under the images which will help a bit with SEO
- Removed all your internal CSS into a single external sheet + a reset sheet.

http://tripnologist.com/atgni/diary/
(there is a zip download link at the bottom of the page)
 
Last edited:
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 :(
 
Ahh, the difference in column height is just down to chance. I didn't put faux columns in, but can do so if you would like.

Ahh, I didn't realise that the sidecol images were to go with each post. I just assumed the images were dumped in there. I'll have to redo that part for you.

A CSS reset, as the name implies, resets CSS styles. The reason for this is that different browsers have different default css values. By resetting them, it makes it considerably easier to ensure that it will look the same across all the browsers.
 
You must log in or register to reply here.
Back
Top Bottom