Geek Answers Handbook

CSS - two simple columns

I have a current page (100% width) with this inside:

[image-fixed-width] | [text-fluid-width -----------------------------------]
                    | -----------------------------------------------------
                    | -----------------------------------------------------

I need text next to the image so that it does not wrap around it, but appears next to it (as in the illustration), like another column. At the same time, the text should cover the entire width of the page. It would be easy to install if you left the text to the left of the field, but the problem is that I do not know the exact width of the image. Image size may vary ...

Is there any solution for this?

+5
source share
4 answers

Try adding overflow: hidden; to your content div. This should make it stick to your columns.

http://jsfiddle.net/BG7FA/

IE6 (go figure)

+6

float: left display: block.

0

An easier way to do this is to create a table with 2 cells, one for the image and one for the text. You will not use css, but it will work with any browser.

0
source

This is an assumption, but I expect it to work.

<div style='width:100%; overflow:hidden'>
   <img style='float:left'/>
   <div style='float:left'>my text</div>
</div>

The logic is that a div (even a floating div) must expand to fill the available space, and the parent will not stretch or allow overflow when setting both options.

0
source

More articles:


All Articles