Cutting a long story short, I still don't fully understand how position works when it comes to using div class tags to set the position of content. If that even makes sense..?

 

What I want to do, is get a layout where I have something like this ignoring the sliders. I want to have an image on the left hand side taking up 70% of the content width then a text section on the right hand side taking up the rest. I understand how to add margins, padding and style the content within these tags, but I don't understand how it relates to whereabouts it is on the page.

 

For an example;

 

As I understand it, these 3 div classes represent 3 individual columns of content in different positions;

.cols {}
.col { float:left; display:inline; width:270px; margin-right:80px;}
.col-right { float:right; display:inline; width:270px;}

 

But I don't understand how it works, and want to understand this fully so I can get to grips with this properly for future reference and help me grow my understanding.

Taking what you want (70% image then text) you could wrap a div around the images and call that col-left and one around the text and call that col-right. Depending on your container/wrap size you set a width for those divs accordingly. You say you want the image to take up 70% so you would set the widths to something like 600px - 300px respectively. This tells the divs how much room on the page they can occupy. What you'll be left with at that stage is images taking up 70% of the page then text below those images taking up 30% so what you need to do is allow the text to come up against the images and occupy the remaining 30% you've allowed for it which is where float comes in. Assigning a float to both these divs (I would assign float left to both I don't see why float right is needed when widths are specified but I'm happy for someone to correct me on that?) will break them from the usual flow of the page and they will float furthers to the top and left that they can. Therefore your content above the floats will stop them going too far up, your container/wrap will stop them going too far left and the width of col-left will define how far col-right can go to the left which gives you that 2-col effect. Because you have defined a width, aslong as col-right can fit in the space to the right of col-left, because it is floated, it will go and occupy that space.

 

There's probably some holes in that explanation and there is various different tweaks to achieve what you want but hopefully that should get the actual concept of it across to you.

 

Here's a general question; What would happen if you gave col-left and col-right display:inline? Can display be given to wrappers in that fashion, i.e. make the whole wrapper inline thus allowing room to the right of col-left?

Thanks for the detailed response jtuds. Before your post, I was playing around with the CSS on my lunch break and managed to work out how to achieve what I want with the 70/30 split and positioning. My modified div classes now look like this;

.cols1 { float:left; display:inline; width:667px; margin-right:40px;}
.col2 { float:left; display:inline; width:263px; height: 95px; margin-right:0px;}

 

However, I have hit a new snag! Although I want to keep the two columns separated I need them to share the same height, so that the description on the right hand side does not run down into the next text section below.

 

Please see attached quick mock up, showing what I want to achieve.

Since both cols have a float you should clear the float and you need to clear it for the full width of the window. I used to do it with an empty div tag but you shouldn't use an empty div tag (it upsets a screen reader), so some people use a br tag with a class:-

.clear { clear: both; width: 100%; }

and insert this between the rows:-

<br class="clear" />

 

I'm not sure if that is a well-coded way to do it, but it should work to form a barrier between one row and the next, so the full height of the right (or left) column will get displayed before the next row starts. The image column on the left won't be the same height as the text column on the right, they will be unequal height but separated from the next row.

Thanks Wickham. Good to see you pop up on here again! I have added this

.clear { clear: both; width: 100%; 

to my CSS, and inserted this

<br class="clear" />

between the rows, but I'm afraid it hasn't had the desired effect. Maybe I haven't explained myself clear enough..

 

In reference to my diagram, I want to put a rule in place where both the columns (Images Col + Text col) have a height limitation where the image or text within these areas cannot go any further, and therefore as a result they sit on the same line as each other every time.

 

So the image col is set at 664 x 400px, and cannot go beyond this size, and the text col 263 x 400px and cannot go beyond this size either. So that both columns stay aligned vertically as the horizontal position is pretty much fixed.

 

I'm sure I tried applying a

height:400px;}

to each of the cols css div tags but it didn't work..

 

Thanks for all the help so far..

Do you mean that a lot of text in the right col is expanding over the height: 400px? If you want the cols to be equal height but to cut off anything that takes more height, like a lot of text in the right col, add height: 400px; overflow: hidden; to the divs:-

.col { float:left; display:inline; width:270px; margin-right:80px; height: 400px; overflow: hidden;}
.col-right { float:right; display:inline; width:270px; height: 400px; overflow: hidden;}

 

That will make the left and right always the same height but will cut off anything that needs more height.

 

Or use overflow: scroll; or overflow: auto; if you want to scroll to see what's cut off.

 

I don't know why you have display: inline and float: left or right, it's usual to use only float if you want divs to be side by side. Try deleting the display: inline; The overflow style may not work with an inline element.

Edited March 14, 201214 yr by Wickham

Do you mean that a lot of text in the right col is expanding over the height: 400px? YES. If you want the cols to be equal height but to cut off anything that takes more height, like a lot of text in the right col, add height: 400px; overflow: hidden; to the divs:- TRIED THIS, BUT NOT WHAT I WANT IM AFRAID

.col { float:left; display:inline; width:270px; margin-right:80px; height: 400px; overflow: hidden;}
.col-right { float:right; display:inline; width:270px; height: 400px; overflow: hidden;}

 

That will make the left and right always the same height but will cut off anything that needs more height.

 

Or use overflow: scroll; or overflow: auto; if you want to scroll to see what's cut off.

 

I don't know why you have display: inline and float: left or right, it's usual to use only float if you want divs to be side by side. Try deleting the display: inline; The overflow style may not work with an inline element.THIS WAS LEFT AS THE SAME FROM STYLING SIMILAR COLS ON OTHER PAGES.

 

Thanks Wickham, I've tried the above but to no avail. I understand the scroll option and I added this code earlier today and tested but it's not what I'm after, so I have taken it back out. I've sent you a PM as I do not want to share link on here. Thanks as always.

Have a look at this http://jsfiddle.net/2qkNE/1/

 

That is the basics of how to achieve what you're trying to do. I've set the heights to try and demonstrate how they cut the the text by giving the left col less height than the right (that rhymed). It's pretty much as Wickham has described it. If you are sure you're following this code structure then I would check your class names to make sure they match up and generally check for little errors like that.

Big thank you to jtuds and Wickham. All has now been resolved! Thanks for your patience.

 

I had got in a muddle because I was placing the

<div class="col1">

&

<div class="col2">

in the wrong place, along with putting the clear div in too many places! At least I know what to do for the future, plus I can refer back here..

 

Slowly but surely..

Edited March 14, 201214 yr by SmuJ

I'm glad you got it sorted. I notice that jtuds uses an empty div tag to clear the floats. As I said before, that's what I used to do but an empty div is not good practice as it confuses a screen reader, so I now use a br tag as described in my first post but I'm not sure if that is good practice either.

 

It's not usual to cut off content using a height and overflow: hidden as someone may need to see the content that's been cut off. Most people would put the two floated divs inside a wrap div and apply overflow: hidden to the wrap div so that the floated divs can use all the height they need. There would be no height to the wrap div or the floated divs, but you would see a space below the image in your left col with a greater text height in the right col.

CSS

.wrap { overflow: hidden; }
.col1 { float:left; /*display:inline;*/
width:667px; margin-right:40px;}
.col2 { float:left; /*display:inline;*/ width:263px; 
margin-right:0px; }

HTML

<div class="wrap">

<div class="col1"><img src="image.jpg" alt="" /></div>
<div class="col2">
<p>Text</p>
<p style="margin-top: 60px;">More Text</p>
<p style="margin-top: 60px;">More Text</p>
<!--margin-top is just to add height to right col to test for a lot of text-->
</div>

</div><!--end of .wrap-->

<div class="wrap">

<div class="col1"><img src="image.jpg" alt="" /></div>
<div class="col2">
<p>Text</p>
<p style="margin-top: 60px;">More Text</p>
<p style="margin-top: 60px;">More Text</p>
</div>

</div><!--end of .wrap-->

 

You don't need the clear br or clear div after the floated divs because the wrap div has overflow: hidden which clears the floats.

 

If you want equal height columns so that a background shows the same height with unequal content, for fixed width columns it's easiset to use the "faux columns" method with a background image with repeat-y in a parent div that spans all the columns. If you have fluid widths you need some complicated nesting using pure CSS that will do it, as these tutorials:-

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

http://css-tricks.com/fluid-width-equal-height-columns/

Edited March 15, 201214 yr by Wickham

I'm glad you got it sorted. I notice that jtuds uses an empty div tag to clear the floats. As I said before, that's what I used to do but an empty div is not good practice as it confuses a screen reader, so I now use a br tag as described in my first post but I'm not sure if that is good practice either.

 

It's not usual to cut off content using a height and overflow: hidden as someone may need to see the content that's been cut off. Most people would put the two floated divs inside a wrap div and apply overflow: hidden to the wrap div so that the floated divs can use all the height they need. There would be no height to the wrap div or the floated divs, but you would see a space below the image in your left col with a greater text height in the right col.

CSS

.wrap { overflow: hidden; }
.col1 { float:left; /*display:inline;*/
width:667px; margin-right:40px;}
.col2 { float:left; /*display:inline;*/ width:263px; 
margin-right:0px; }

HTML

<div class="wrap">

<div class="col1"><img src="image.jpg" alt="" /></div>
<div class="col2">
<p>Text</p>
<p style="margin-top: 60px;">More Text</p>
<p style="margin-top: 60px;">More Text</p>
<!--margin-top is just to add height to right col to test for a lot of text-->
</div>

</div><!--end of .wrap-->

<div class="wrap">

<div class="col1"><img src="image.jpg" alt="" /></div>
<div class="col2">
<p>Text</p>
<p style="margin-top: 60px;">More Text</p>
<p style="margin-top: 60px;">More Text</p>
</div>

</div><!--end of .wrap-->

 

You don't need the clear br or clear div after the floated divs because the wrap div has overflow: hidden which clears the floats.

 

If you want equal height columns so that a background shows the same height with unequal content, for fixed width columns it's easiset to use the "faux columns" method with a background image with repeat-y in a parent div that spans all the columns. If you have fluid widths you need some complicated nesting using pure CSS that will do it, as these tutorials:-

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

http://css-tricks.com/fluid-width-equal-height-columns/

 

Flexible heights is definitely the better options, unless you know for sure you want the layout to all be identical and you know the content isn't going to change, i.e. get more text than the height can handle.

 

Regarding the empty div, I've never been comfortable using it but it's the only way that seems to be reliable for me. I've sometimes see the clearfix alongside another class, e.g. <div class="col2 clear"> but I can never seem to get this method to work and I suspect I'm probably doing it wrong. It's probably about time I stop being lazy and research a better method.

Thanks for your replies again guys, and for the explanation on the empty div tag. I have now implemented the code in your latest post Wickham and this works A-OK as described. The reason why I was pushing more towards a fixed size with bits getting cut off is because I wanted to streamline the layout so it was all evenly spaced, plus I know the images on the left hand side would always be the same size and the captions on the right will only be a small amount of text that should fit in the area allocated when fixed.

 

However, in hind sight it is probably best to use the flexible height just in case some of the captions run longer then expected and it will auto adjust rather then me have to re-do the rigid code supporting it. So thanks for the heads up on that guys.

 

As I final thought, I think this may be the ultimate solution and I will look into this at some point at the weekend when Im back at my desk, but for the time being I'm happy with what I've got and the progress made, but we will see. Knowing me, I will probably switch it all round again and implement the method below.. tweek tweek tweek lol

If you want equal height columns so that a background shows the same height with unequal content, for fixed width columns it's easiset to use the "faux columns" method with a background image with repeat-y in a parent div that spans all the columns. If you have fluid widths you need some complicated nesting using pure CSS that will do it, as these tutorials:-

http://matthewjamest...er-css-no-hacks

http://css-tricks.co...height-columns/

 

Thanks all!