List To The Left, Image To The Right

[Foxhole]

Hi again all,

Just hoping someone out there is able to help me, I have been struggling again with a very basic thing and I can't understand where I'm going wrong.

Basically I have a fixed width (960px) white background on my web page, I have a bullet point list positioned to the left, and I want to display my image over on the right inline with it.

I can position the image over to the right but it always goes underneath the list. I have tried putting these together in a division but it did'nt seem to work, I'm not too sure if that is the right approach anyway.

I would be very grateful if someone can help,

Here is the code:

HTML:

<ul>
<li>Custom Website Design And Redesign</li>
<li>Logo Design</li>
<li>Domain Name Registration</li>
<li>Website Hosting</li>
<li>On-Site Photography</li>
<li>Content Control And Management</li>
<li>Customer Support</li>

</ul>

<img id="pricestar" src="kwd_graphics/pricefromsign.png" alt="pricefromsign" />




CSS:

li {
font-family: century gothic, tahoma;
color: #464646;
font-size: 14px;
line-height: 18px;
text-align: left;
padding: 0 0 0 0;
margin: 0 0 0 0;
clear: right;
}

#pricestar {
display: inline;
margin-left: auto;
margin-right: 30px;
padding: 20px 0 20px 0;
float: right;
}



Don't be fooled by the list items, i'm no web designer! Just trying to learn.

Thanks for your help all,

Foxhole

[webeno]

then i suggest you learn how to wrap other divs and also the float property ;)

i would simply setup 3 divs, one that wraps the list items, another one that wraps the image and a 3rd one that wraps the whole thing. make sure the width of the wrapper div is always the same or more than the sum of the 2 "sub-wraps".

HTML:

<div id="wrapper">
<div id="lister">
<ul>
<li>Custom Website Design And Redesign</li>
<li>Logo Design</li>
<li>Domain Name Registration</li>
<li>Website Hosting</li>
<li>On-Site Photography</li>
<li>Content Control And Management</li>
<li>Customer Support</li>
</ul>
</div>

<div id="rightpic">
<img src="kwd_graphics/pricefromsign.png" alt="pricefromsign" />
</div>
</div>

CSS:

li {
font-family: century gothic, tahoma;
color: #464646;
font-size: 14px;
line-height: 18px;
text-align: left;
padding: 0;
margin: 0;
}

#wrapper {
width: 600px
}

#lister {
width: 400px;
float: left;
}

#rightpic {
display: inline;
margin-left: auto;
margin-right: 30px;
padding: 20px 0 20px 0;
width: 200px;
float: right;
} 

alternatively you can simply leave out the lister and rightpic selectors and setup the wrapper selector width your image as background to the right and set it's with to big enough not to overlap into the text on the left.

HTML:

<div id="wrapper">
<ul>
<li>Custom Website Design And Redesign</li>
<li>Logo Design</li>
<li>Domain Name Registration</li>
<li>Website Hosting</li>
<li>On-Site Photography</li>
<li>Content Control And Management</li>
<li>Customer Support</li>
</ul>
</div>

CSS:

li {
font-family: century gothic, tahoma;
color: #464646;
font-size: 14px;
line-height: 18px;
text-align: left;
padding: 0;
margin: 0;
}

#wrapper {
width: 600px;
background: url(kwd_graphics/pricefromsign.png) no-repeat right
}

not entirely sure why you used clear: right; styling the list, also if your padding and margin is 0, you don't have to set all 4 sides, but it's enough to set it once, like margin: 0; paddig 0;

[rocknbil]

Welcome aboard Foxhole, when you float an element, it needs something to float around. To see "what's really going on" with your float as is, put a border on ul, it will become evident:

ul { border: 1px solid #000; }

You may need a width on the list, but the solution will be to put the image pricestar before the list in the source code, it should work, like

<img>
<ul>
...
</ul>

Also take display:inline off pricestar, what you probably want is display:block (or nothing at all.)

If you need to leave it where it is, float the list left, but you may still have to put a width on both elements.

You don't need clear on list items, clear has the basic effect of insuring any items following it will be forced below the clearing element (in most cases.)

[Foxhole]

Thanks you both for your help, it is really appreciated. It makes a lot more sense now you have explained it in simple terms.

I have been reading through a book I have, specifically on the chapter regarding positioning images and after about three or four readthroughs, it still didn't make sense!

Thanks again,

Foxhole

[hbmehta]

webeno's first solution should fix the problem. Just want to add something to it. Margin-right to rightPic was giving problem. Remove it. It should show both in one line.

[Foxhole]

Thanks Hbmehta,

All sorted, just reading how they explained the resolution to this problem gave me a much better understanding how this works so I was able to put it right.

seems so simple now but was sending me nuts before!

Thanks again all,

Foxhole