CSS - display:table-row ?

Question

I have a layout like this:

[left-image]            | [title-------------------------------------]
(width up to 150)       | [left-floated-p -----------[right-floated-p]
                        |
                        | lots of text................................

the only way I could implement this is by using float:left on the "left-image" and display:table-row on the contents from the right side.

the problem is that this doesn't seem to work in IE 7 :(

are there any fixes for it? or other alternatives to implement such a layout? note that I can't use margin-left on the right blocks because I don't know the exact size of the left image + I have 2 floats on the right side and clearing them messes up the layout...

Answer 1

The best alternative for implementing such a layout would be using a grid framework like blueprintcss, yahoo grid etc.

Answer 2

Unfortunately IE 7 doesn't support it. A quick solution:

CSS

<style type="text/css">
  #wrapper {
    width: 800px;
    margin: 0 auto;
  }

  #leftcol {
    width: 150px;
  }

  #rightcol {
    width: 650px;
  }

  #twocols {
    overflow: auto;
  }

  #leftp,#rightp {
    width: 325px;
  }

  #leftcol, #leftp {
    float: left;
  }

  #rightcol, #rightp {
    float: right;
  }
</style>

HTML

<div id="wrapper">
  <div id="leftcol"><img src="yourimage.jpg" /></div>
  <div id="rightcol">
    <h1>Title</h1>

    <div id="twocols">
      <p id="leftp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed iaculis augue. Proin accumsan tortor at dui imperdiet pellentesque. In eu purus vulputate orci porta scelerisque. Maecenas eget purus mauris, et sagittis turpis. Phasellus bibendum elit et risus dignissim gravida. Quisque feugiat mauris sit amet urna porta imperdiet. Proin feugiat rhoncus orci dictum mattis.</p>
      <p id="rightp">Praesent condimentum, dolor eu aliquet adipiscing, neque est vestibulum nunc, id dignissim tortor risus sed tortor. Donec luctus scelerisque ornare. In fringilla ullamcorper erat, convallis adipiscing nulla adipiscing ut. Nunc convallis consequat tellus ut aliquam. Vivamus tortor tortor, lacinia eget dignissim sed, pharetra ac risus. Vestibulum quis condimentum turpis. Maecenas magna tellus, dignissim eu suscipit id, placerat quis metus.</p>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nulla quis tempus tempus, arcu velit elementum risus, consectetur rutrum diam odio vitae mi. Curabitur euismod tincidunt ipsum, id volutpat lectus bibendum eget. Nam at pulvinar felis. Vestibulum non lectus id turpis congue tempor sed eget orci. Sed pellentesque felis vitae augue cursus ac gravida arcu tincidunt. Aenean et sem lectus. Curabitur vehicula odio lorem. Morbi ultricies fermentum dolor, vitae convallis leo condimentum at. Pellentesque faucibus justo non enim varius varius. Nulla accumsan feugiat orci, egestas laoreet mauris rhoncus non. In lacinia purus in magna pulvinar et sollicitudin urna mollis. In eleifend augue ac sem suscipit eget adipiscing odio gravida. Nam tincidunt dui pharetra lacus bibendum volutpat. Integer faucibus luctus magna, et eleifend metus iaculis vitae. Cras imperdiet dignissim mi, porta elementum elit dignissim non. Ut egestas congue elit quis volutpat. Nunc ac massa neque.</p>

    <p>Praesent id lectus felis. Phasellus sapien leo, ultrices nec rhoncus a, tincidunt in lacus. Mauris tincidunt volutpat nisi, quis viverra ligula pellentesque semper. Phasellus sem sem, tristique vitae sollicitudin eu, tincidunt egestas felis. Aliquam id nunc augue. Integer lectus dolor, lacinia non pellentesque non, elementum at lorem. Donec nec vulputate magna. Vestibulum lobortis risus a elit fringilla dapibus congue tellus tincidunt. Nulla a eleifend justo. Sed nec nisl augue, id vulputate ante. Vestibulum dapibus tristique nisl, non consequat nisi bibendum sit amet. Phasellus quis diam orci, et fringilla est. Morbi quis aliquam ante. Donec bibendum suscipit magna tempus feugiat. Mauris ultricies, neque sed venenatis lacinia, nulla magna scelerisque libero, vitae pharetra urna mi eget nunc. Nullam tellus quam, sagittis a volutpat id, imperdiet vel libero. Curabitur fringilla velit id ligula faucibus dapibus. Aliquam id augue leo. Aenean ac felis vel lectus commodo tempus.</p>

    <p>Fusce facilisis facilisis enim et pharetra. Vivamus luctus pellentesque accumsan. Mauris sem metus, ullamcorper vel ornare in, eleifend id risus. Pellentesque viverra lacinia nulla eget hendrerit. Integer consequat egestas placerat. Etiam libero nisl, euismod in tristique ac, convallis eget purus. Nulla vulputate quam sit amet purus consectetur dapibus. Etiam aliquet purus non felis sagittis porta. Fusce id libero nibh. Ut auctor odio sed leo iaculis ut faucibus leo blandit. Maecenas imperdiet enim imperdiet elit hendrerit mattis. Etiam mauris ipsum, malesuada eget posuere eget, molestie quis sem. In commodo consequat arcu laoreet fermentum. Duis et magna massa, et molestie magna.</p>
  </div>
</div>

You would need to make the text and headline prettier, but this works.

Answer 3

I think something like this would work

 <div id="wrapper">
    <div id="leftImage">Hello</div>
    <div id="rightSide">
      <!-- Right side things here -->
    </div>
  </div>


#wrapper {
  width:400px;
    height:400px;
    background:red;
}

#leftImage {
  position:absolute;
  width:200px;
    height:200px;

    background:blue;
}
#rightSide {
  position:relative;
  width:200px;
    height:200px;
    background:green;
    float:left;
    margin-left:200px;
}

Answer 4

With the same HTML code used by Gert G in his answer, here is an alternative using display: inline-block;:

#wrapper {
    width: 960px;
}

#leftcol {
    display: inline-block;
    width: 150px;
    vertical-align: top;
}

#rightcol {
    display: inline-block;
    width: 800px;
}

Conditional comment for IE<8
#leftcol, #rightcol { display: inline; zoom: 1; }

#rightcol can have a width of 810px IF you strip whitespace between ending tag of #leftcol and the beginning one of #rightcol

Answer 5

if height of title & paragraphs height are static/

just write a margin-bottom to your left image. you dont need a extra column at right of the page/

height (title & paragraphs) = X; margin-bottom (img) = X + 100; (for your text;)

btw text should be in a division/

max-width (img) = 150px;

min-width (div.all or body) = width(img)+width(your text at right) /