Hi there, I know this is my first post but I am creating a template for a Joomla component SOBI2. I don't know whether you know it or not. My problem is that the layout of the template is perfect but the container div's are acting strange.

 

The container divs around the floating divs aren't stretching with there content, maybe it is better for a example of this:

 

Example

 

As you can probably see the HTML code is fine, so for the ease I'll post the CSS code beneath:

 

#sobi_title {
clear:left;
width:100%;
border:1px solid #000;
height:30px;
margin:15px 0px;
}
#sobi_title_1 {
float:left;
width:70%;
}
#sobi_title_2{
float:left;
width:30%;
text-align:right;
}
#sobi_details {
clear:left;
width:100%;
border:1px solid #000;
margin:15px 0px;
}
#sobi_details_1 {
float:left;
width:15%;
}
#sobi_details_2 {
float:left;
width:85%;
}
#sobi_url {
clear:left;
width:100%;
margin:15px 0px;
border:1px solid #000;
}
#sobi_url_1 {
float:left;
width:15%;
height:30px;
}
#sobi_url_2 {
float:left;
width:85%;
height:30px;
}
#sobi_tip {
clear:left;
width:100%;
margin:15px 0px;
border:1px solid #000;
}
#sobi_tip_1 {
float:left;
width:15%;
}
#sobi_tip_2 {
float:left;
width:85%;
}
#comment_container {
width:100%;
border:1px solid #000;
}

 

The container div with the content "beschrijving" and "blahh + image" is one pixel the border is on top of the content, how can this happen. I also tried to apply the height:auto; style but this ain't helping.

 

When this template is finished I want to contribute it to the SOBI community so it is a sort of donation to them. I'm going to use it myself also but I want to give them someting back for there great component. I can also post it here if there are some Joomla and SOBI users ??

 

Can one of you experts out there see wat I'm doing wrong ??

 

Thanks for you time

The container div with the content "beschrijving" and "blahh + image" is one pixel the border is on top of the content, how can this happen.

 

I'm not sure what you mean by that. Can you elaborate further on the problem that you're seeing? What browser are you using?

 

And, welcome to the madhouse.

I had a look at the example, and I can see that there is a difference with the styling, but I'm unsure exactly what you're after. Could you explain it more?

 

Rob

It looks fine to me, can you explain a bit more?

 

Welcome to WDF!

Thanks for the warm welcome

 

The problem is the layout is separated in to several containers with two or more floating divs in them, now the containers :

- sobi_title

- sobi_details

- sobi_url

- sobi_tip

- comment_container

 

They've got some problems with theire height, if I put a border around sobi_details then the border is showing on top of the div

 

3 replys in 15 minuits, damn fast

 

Exquise me for the english:P

 

EDIT: I'm using Firefox 2.0.0.12

Try putting Overflow: hidden; as a style on all the elements that contain the floated (float: left) elements.

 

Like so:

 

#sobi_details {
clear:left;
width:100%;
border:1px solid #000;
margin:15px 0px;
overflow: hidden;
}

Try putting Overflow: hidden; as a style on all the elements that contain the floated (float: left) elements.

 

Ok I'll give it a try, back in a sec ...

 

 

EDIT: Damn that worked, you're goood

 

I've never had this problem earlier, is it common to put this option in your container div's ??

 

1000 times thanks

That's £10 for the help

 

It is only needed (in that context) if you have floated elements inside a containing element that isn't floated itself, and that doesn't have a fixed height. You also need to make sure the containing element has a set width, but as you already had it as 100%, you didn't have to add that again.

 

Glad it fixed your problem though!

 

Rob

That's £10 for the help

 

It is only needed (in that context) if you have floated elements inside a containing element that isn't floated itself, and that doesn't have a fixed height. You also need to make sure the containing element has a set width, but as you already had it as 100%, you didn't have to add that again.

 

Glad it fixed your problem though!

 

Rob

 

Whaha thats the same as 10 Euro's right ?

 

Ok, nice to know i knew it had something to do with a height property, but never heard of the overflow for this use. I have been searching for this for 2 day's now I think, even posted the same question on some dutch forums. But they think beginners are to low for them, so they just don't answer your questions.

 

So after all I really like to thank you, also for the lesson Great help here

This worked out fine, I now I'm double posting but just want to show how the layout turned out.

 

SOBI Template

 

Don't mind the rest of the website, I'm working on it