Forum Moderators: not2easy

Message Too Old, No Replies

CSS Text / Image Layout Trouble

Having trouble with CSS layout

         

petemcw

8:27 pm on Mar 18, 2004 (gmt 0)



I am fairly new to CSS layout and I could really use some help on a specific CSS layout.

I am trying to create a box with an image aligned to the left inside the box, and text to the right of the box. I created an .gif of my thought to make it easier to understand.

[midwestautoworks.com ]

Any help with both CSS and HTML to create the above effect would be awesome! Thanks!

your_store

8:35 pm on Mar 18, 2004 (gmt 0)

10+ Year Member



Welcome to Webmaster World petemcw. You might want to check out the TOS [webmasterworld.com]; because, posting url's is not allowed. Anyhow, to the fun part...

I would absolutely position the image to avoid the text from wrapping.

Markup:

<div class="box">

<img class="image" src="blah.gif">
<p class="text">text text text</p>

</div>

CSS:

box {
position: relative; /* Allows children to be absolutely positioned within box */
}

img.image {
position: absolute;
top: 0;
left: 0;
}

p.text {
margin-left: 100px; /*replace w/ image width + spacing */
}