Preserved Topic: CSS Two Rows (internal display)

Ok, I have two largish pictures of the problem.



The above illustrates the problem. What I am looking for is them to be displayed as they as seen below.



I know that the problem is spacing. I am using % for one of the columns so that it expands with the page.

If I insert <br /> or two or three I can fix this problem, however it will not work on larger resolutions.

What I am looking for is a universal way to get past this.

The code I am working with right now is:

<div>

<span style="float:left;width:115 px;">

<img src="image path" width="100" height="100" alt="" border="1" />

</span>

<span style="float:left;width:50%;">

<p><b>Page Title</b> - Little Blurb about page</p>

</span>

</div>

[This message has been edited by WarMage (edited 08-22-2001).]

I'm sure there is a way to a sort it out but after spending a while looking at the two images I checked the source to see if I was going mad and it appears you've posted the same picture twice. So repost the other image (the one we've got is problem1) or a couple of links to the actual pages and we'll see what we can do.

Emps

OK here is the second image:
http://www.warmage.f2s.com/temp/problem2.gif



I'll give it some thought - I'd prefer to see the source though.

Emps

My only thought is that this might work better:

image {

  float: left;

}

.holder {

  width: 100%

} 

.textDesc {

  width: 50%;

}



<div class="holder">

<img class="image" src="image path" width="100" height="100" alt="" border="1" />

<p class="textDesc"><b>Page Title</b> - Little Blurb about page</p>

</div>

Or something - it depends on whether you want the text to wrap under the image or if you want to treat them like they are in two different columns - if so try the code under "FORM(s) and Function" on:
http://www.alistapart.com/stories/practicalcss

Emps

Yeah, that works great! Thanks a lot for the help.

Sorry for posting the wrong image as well...