Help with 3-column layout

HTML & CSS
1

Hello all, I have a layout here that should be pretty easy because it is quite static, yet I’m having trouble getting the divs to behave. The layout is here:

http://hapkidobcn.com/tecs.php

Very much a work in progress right now. The problem I have is that I need the 3 columns in the center to be top aligned with each other and have a certain margin between them.

Absolute positioning solves that problem nicely, but then the div that contains them does not flow with the content because I just remembered that absolute positioning removes the element from the flow.

So the question is, what is the simplest way to obtain such a layout?

I’d like to solve it for these 3 columns, but I can’t really change the container because I have other pages that are working with the layout as is, that is, I need to find a solution that affects the 3 columns and hopefully not the rest of the layout.

Thanks

2

Sorry to say so but you made your CSS over complicated. You have container in container. What you want to accomplish can be done much easier. But to come back to your question. You could use:

margin-top: 150;

instead and make the Tec divs floating. There are a few things that will give you problems and you need to adjust. The width of those three Tecs together (831px incl. padding and borders ) is wider then your main div, which has a width of only 800px. So or you have to make that div wider or you have to remove the padding from those three Tec divs. I would do it like this:


#main {
width:801px;
/* other values for main */
}

#leftTec {
	width:245px; margin: 150px 10px 0; float: left background-color:white; border:1px solid red; min-height:100px;  ext-align:justify;
}

#middleTec {
	width:245px; margin: 150px 10px 0; float: left; background-color:#A17D59; border:1px solid blue; left:300px; min-height:100px; text-align:justify; 
}

#rightTec {
	width:245px; margin: 150px 10px 0; float: left; background-color:white; border:1px solid green; min-height:100px; text-align:justify;
}

So what I have done here is, instead of absolute positioning a used margins and float to align them the right way, I removed the padding from those three Tec divs (better use margins or padding for the content inside these divs). With the padding of 10 pxls on both sides and the border the total width of each of those three divs is 267pxls is 801pxls together, so I changed the width of the main div accordingly. Just tested it and it works for me.

3

Also, since I’m here, is there a way to apply all the common attributes to all 3 divs and then separate the specific ones? That is, instead of having to repeat the size and float: left and what not for all 3, there has to be a simpler way of grouping these attributes so that I can then change them all in one spot no?

BTW the floating solution seems to work beautifully. I tried it earlier but must have done something wrong becase it didn’t work for me. Thanks a lot.

4

Also, since I’m here, is there a way to apply all the common attributes to all 3 divs and then separate the specific ones? That is, instead of having to repeat the size and float: left and what not for all 3, there has to be a simpler way of grouping these attributes so that I can then change them all in one spot no?

As far as I can see are only the background-color and line color different for those three Tec divs so what you could do is:


#leftTec,
#middleTec,
#rightTec {
    width:245px; margin: 150px 10px 0; float: left; background-color:white; border:1px solid red; min-height:100px;  text-align:justify;
}

#middleTec {
     background-color:#A17D59; border-color: blue;
}

#rightTec {
    border-color: green;   
}

First I applied the style from the leftTec on all three divs and after that I have set the styles for the middle and rightTec. Since they are coming after the leftTec in the sheet the background and border color for those two declared in the leftTec are overwritten.

5

ah yes, that is very smart, now why didn’t I think of that?

Thanks a lot!

6

Thanks for the quick reply. I’m all for doing things properly. Which container is redundant, the topText one? I need #main because it’s the white background. There was a reason to use topText but I forgot what it was :slight_smile:

I think it might have been as a way to apply common styles to all the divs inside it like line-height and what not.