|
Posted by Edelman.Jason on 06/21/06 21:23
Jonathan N. Little wrote:
> 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
or you could remove all your CSS that you have now regarding position
and just float the image right and the list left. be sure to clear
your content div for firefox, since you're using floated items in it.
--
Jason Edelman
http://fixmysite.blogspot.com
[Back to original message]
|