Divs: my image next to my paragraph

Hello,

I'm having some trouble with a CSS layout I'm designing. The top section of my layout has an image on the left with a paragraph on the right. it works fine on Firefox and IE7, but not on IE6.

The problems arise due to another div below #topcontent (see below) that seems to want to wrap up to the available spaces (especially on IE6), etc.

I *know* there must be a better way of doing this because I'm having to set a height for it to work on Firefox/IE7 and whilst it looks OK, the height causes problems of its own when rezising text (as the resized text spills over the height - which is fixed in this case).

For some reason I seem to be using the image as a background image, set at the correct width/height. I hope I've explained myself OK I can see how this might be complicated to understand when you're not sat here!


Here is XHTML/CSS:
--------------------

<div id="topcontent">

<div id="imageontheleft">
</div>

<div id="textontheright">
<p>A paragraph of text goes here.</p>
</div>

</div>


----

#topcontent {
width: 100%;
margin: 10px 0 0 0;
}

#imageontheleft {
width: 280px;
height: 150px;
float: left;
background-image: url(image.gif);
background-repeat: no-repeat;
margin: 0 7px 0 15px;
}

#textontheright {
width: 450px;
height: 150px;
float: right;
}

 

I took a look at the code, but got stumped as to what exactly you're trying to accomplish. Could you describe what the problem is exactly and/or what you're trying to achieve?

 

Hi GWiz. Yes, of course, sorry about that!

I have attached an image to better explain things. I'm mainly after a more solid way of getting the div that contains the image and pargraph (#topcontent) to sit above the other container div below it (#main).

I'm wanting:

1) #topcontent to sit across 100% of the page container and to sit above another div container (#main) that should sit BELOW it.

If anyone can't help out that would be great. I'm "almost" there! Feel free to post any questions and I will try and explain futher.

 

I understand that the image on the left is a fixed size, and the paragraph area should expand to the full limits?

Here's the code that I came up with so far, let me know if this is what you needed:

HTML:

<div id="topcontent">
<div id="imageontheleft"></div>
<div id="textontheright">
<p>A paragraph of text goes here. </p>
</div>
</div>

Code (markup):

CSS:

#topcontent {
width: 100%;
margin: 10px 0 0 0;
}

#imageontheleft {
width: 280px;
height: 150px;
float: left;
background-image: url(image.gif);
background-repeat: no-repeat;
}

#textontheright {
float: left;
height: 150px;
margin: 20px 0 -20px 20px;
}

Code (markup):

 

Thanks for the input. I think I have solved the problem. I added

<div id="clearone">&nbsp;</div>

#clearone {
clear: both;
height: 1px;
}

Something one of my books mentioned and it seemed to solve the problem. Not sure if this is the best way but everything is working now!

 

Well there's always more than one way of solving the problem, it really just depends on the context. When you don't specify entirely what you want, then it becomes difficult to find a solution since there can be a number of unique solutions which correspond to each type of desired result.

 

..or you could simply use align="left" under the IMG tag. Validates with xHTML Transitional.

 

But if he's bothered to use XHTML instead of HTML4 in the first place, he might as well stick with the fuel injection instead of reverting back to the carburetor. Not that I hold anything against carbs already working in some nice muscle car or something, but I wouldn't want it in my Prius : )

 

Why do people constantly add more HTML code than they have to? Stick the image in the DIV with the paragraph contents, then float the image to the left. Problem solved.

 

I can't believe it took 8 replies before this was even mentioned. Also, you'd want to add a small margin to img in your stylesheet (see below) to stop the text from meeting the image.

img { margin:0 5px; } or

#content img { margin:0 5px; } (you'd want to rename '#content' depending on your parent element)

Then to finish it off a 1px border and a couple pixels of padding can add the finishing touch.

 

It only took 8 replies because I'm at a library. If I was at home, it would have been the first reply.