|
Posted by Jonathan N. Little on 06/20/06 18:27
Rivera wrote:
> Hello i have a problem driving me nuts because i can't get it to work in IE
> and Firefox.
>
> I am trying to do something very simple. I want to a have list to the left
> and to the right of that list i want to have an image. I can't seem to get
> it right even though I am sure the answer is easy.
>
> Here is what i have for HTML....
> ************************
> <body>
>
> <div id="content">
> <div id="Info">
> <ul>
> <li>1</li>
> <li>2</li>
> <li>3</li>
> <li>7</li>
> </ul>
> </div>
> <img id="Pic" src="test.jpg" />
> </div>
>
> </body>
> **********************
> and my Css...
>
> #content{
> display: block;
> border: 2px solid gray;
> position: relative;
> left: 20%;
> width: 60%;
> }
> #Info{
> position: relative;
> display: inline;
> left: 3%;
> }
> #Pic{
> position: relative;
> display: inline;
> }
>
> I was under the impression that displaying both inline will put them next to
> each other?
> Any help would be great.
The problem is UL are block elements. BTW IMGs are inline by default. I
think what you are looking for it to make
#Info{
float: left;
margin-left: 3%;
/* you will probably need to define a width here as well */
}
#Pic{
/*You can remove your setting here, you want the default */
}
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|