Css positioning help

Discussion in 'HTML' started by Rivera, Jun 20, 2006.

  1. Rivera

    Rivera Guest

    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.

    Ricky
    Rivera, Jun 20, 2006
    #1
    1. Advertising

  2. 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
    Jonathan N. Little, Jun 20, 2006
    #2
    1. Advertising

  3. Rivera

    Guest

    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
    , Jun 21, 2006
    #3
  4. wrote:
    > Jonathan N. Little wrote:


    >>> 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 */
    >> }
    >>


    >
    > 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.
    >


    Except floating content both left and right has a tenancy to create the
    "dumbbell" effect where you have a lump of stuff on the left and a lump
    of stuff on the right and nothing or very little in the middle.
    Especially pronounced on large viewports. This is usually not a very
    attractive design. Better to float only one and let the other fill in.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 22, 2006
    #4
  5. Rivera

    dorayme Guest

    In article <148c0$4499cffe$40cba788$>,
    "Jonathan N. Little" <> wrote:

    > Except floating content both left and right has a tenancy to create the
    > "dumbbell" effect where you have a lump of stuff on the left and a lump
    > of stuff on the right and nothing or very little in the middle.
    > Especially pronounced on large viewports. This is usually not a very
    > attractive design. Better to float only one and let the other fill in.


    or float both the same way...

    --
    dorayme
    dorayme, Jun 22, 2006
    #5
  6. dorayme wrote:
    > In article <148c0$4499cffe$40cba788$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> Except floating content both left and right has a tenancy to create the
    >> "dumbbell" effect where you have a lump of stuff on the left and a lump
    >> of stuff on the right and nothing or very little in the middle.
    >> Especially pronounced on large viewports. This is usually not a very
    >> attractive design. Better to float only one and let the other fill in.

    >
    > or float both the same way...
    >

    Yep! Sometimes that will work, test carefully with IE though, sometimes
    the peekaboo will get you. The best strategy in my opinion is you use
    the minimum number of floats to get what you desire avoids many IE
    surprises.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 22, 2006
    #6
  7. Rivera

    dorayme Guest

    In article <a4821$4499dadb$40cba788$>,
    "Jonathan N. Little" <> wrote:

    > The best strategy in my opinion is you use
    > the minimum number of floats to get what you desire avoids many IE
    > surprises.


    Yes, I do this too. Not out of great knowledge but out of sheer
    miserable cowardly funk... I try to be simple because the yellow
    stripe down my back starts to glow and vibrate otherwise

    --
    dorayme
    dorayme, Jun 22, 2006
    #7
  8. Rivera

    Edelman Guest

    Jonathan N. Little wrote:
    > Except floating content both left and right has a tenancy to create the
    > "dumbbell" effect where you have a lump of stuff on the left and a lump
    > of stuff on the right and nothing or very little in the middle.
    > Especially pronounced on large viewports. This is usually not a very
    > attractive design. Better to float only one and let the other fill in.


    the only time this creates a "dumbbell" effect is when you do it wrong.
    if you're floating stuff, you want it on the left and right. the
    content in this example is contained in a wrapping div with a set
    width. the float both the same direction is a good solution too, but
    it won't always work the way you want it to, especially if your code is
    out of order (ie, the element you want to show up first is actually
    second in your code. learn the correct way to float and clear floats
    and you should be fine.

    --
    Jason Edelman
    http://fixmysite.blogspot.com
    Edelman, Jun 22, 2006
    #8
  9. Rivera

    dorayme Guest

    In article
    <>,
    "Edelman" <> wrote:

    > Jonathan N. Little wrote:
    > > Except floating content both left and right has a tenancy to create the
    > > "dumbbell" effect where you have a lump of stuff on the left and a lump
    > > of stuff on the right and nothing or very little in the middle.
    > > Especially pronounced on large viewports. This is usually not a very
    > > attractive design. Better to float only one and let the other fill in.

    >
    > the only time this creates a "dumbbell" effect is when you do it wrong.


    Which is like saying that the stealth bomber will crash if the
    computers go down and the pilots don't take over and do things
    right [1] ...

    OK, it's not quite like that... but I think JL's point was good.

    [1] It is not an aerodynamic plane and needs very high
    maintenence control systems to keep it from what it naturally
    wants to do, that is, crash horribly. Aristotle had this idea
    that there were final causes, that there were purposes and ends
    built into the world and its objects. He was no Darwin, trust me.
    The US stealth bomber wants to crash no less than a stone wants
    to be reunited with its natural place when dropped. Edelman, you
    were wanting to know about this sort of thing, no?

    --
    dorayme
    dorayme, Jun 22, 2006
    #9
  10. Rivera

    Edelman Guest

    dorayme wrote:
    > Which is like saying that the stealth bomber will crash if the
    > computers go down and the pilots don't take over and do things
    > right [1] ...
    >
    > OK, it's not quite like that... but I think JL's point was good.
    >
    > [1] It is not an aerodynamic plane and needs very high
    > maintenence control systems to keep it from what it naturally
    > wants to do, that is, crash horribly. Aristotle had this idea
    > that there were final causes, that there were purposes and ends
    > built into the world and its objects. He was no Darwin, trust me.
    > The US stealth bomber wants to crash no less than a stone wants
    > to be reunited with its natural place when dropped. Edelman, you
    > were wanting to know about this sort of thing, no?


    i...i got nothin.

    wtf?

    --
    Jason Edelman
    http://fixmysite.blogspot.com
    Edelman, Jun 22, 2006
    #10
  11. Edelman wrote:
    > dorayme wrote:
    >> Which is like saying that the stealth bomber will crash if the
    >> computers go down and the pilots don't take over and do things
    >> right [1] ...
    >>
    >> OK, it's not quite like that... but I think JL's point was good.
    >>
    >> [1] It is not an aerodynamic plane and needs very high
    >> maintenence control systems to keep it from what it naturally
    >> wants to do, that is, crash horribly. Aristotle had this idea
    >> that there were final causes, that there were purposes and ends
    >> built into the world and its objects. He was no Darwin, trust me.
    >> The US stealth bomber wants to crash no less than a stone wants
    >> to be reunited with its natural place when dropped. Edelman, you
    >> were wanting to know about this sort of thing, no?

    >
    > i...i got nothin.
    >
    > wtf?
    >


    dorayme is being a little obtuse but essentially your proposed can an
    will work but requires careful control many aspects such as block widths
    and subsequent clearing of floats (akin to precision required to keep
    that plane in the air). But floating only one element and not the other
    does not require such precision and is free to naturally fall in to
    place. We are not saying your method will not work, but may be more
    complicated than it needs to be.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 22, 2006
    #11
  12. Rivera

    Edelman Guest

    Jonathan N. Little wrote:
    > dorayme is being a little obtuse but essentially your proposed can an
    > will work but requires careful control many aspects such as block widths
    > and subsequent clearing of floats (akin to precision required to keep
    > that plane in the air). But floating only one element and not the other
    > does not require such precision and is free to naturally fall in to
    > place. We are not saying your method will not work, but may be more
    > complicated than it needs to be.


    of course, this all depends on what you want. if you want your page to
    fall where it may, sure, go ahead. but usually, at least in my
    experience with big account clients, precision is of utmost importance,
    especially if you're working off an approved comp. be lazy if you'd
    like, but that fine attention to detail is usually what separates the
    great from the crap.

    --
    Jason Edelman
    http://fixmysite.blogspot.com
    Edelman, Jun 22, 2006
    #12
  13. Edelman wrote:
    > Jonathan N. Little wrote:
    >> dorayme is being a little obtuse but essentially your proposed can an
    >> will work but requires careful control many aspects such as block widths
    >> and subsequent clearing of floats (akin to precision required to keep
    >> that plane in the air). But floating only one element and not the other
    >> does not require such precision and is free to naturally fall in to
    >> place. We are not saying your method will not work, but may be more
    >> complicated than it needs to be.

    >
    > of course, this all depends on what you want. if you want your page to
    > fall where it may, sure, go ahead. but usually, at least in my
    > experience with big account clients, precision is of utmost importance,
    > especially if you're working off an approved comp. be lazy if you'd
    > like, but that fine attention to detail is usually what separates the
    > great from the crap.
    >


    I think you are confusing 'precision' with 'effective'.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 22, 2006
    #13
  14. Rivera

    dorayme Guest

    In article
    <>,
    "Edelman" <> wrote:

    > dorayme wrote:
    > > Which is like saying that the stealth bomber will crash if the
    > > computers go down and the pilots don't take over and do things
    > > right [1] ...
    > >
    > > OK, it's not quite like that... but I think JL's point was good.
    > >
    > > [1] It is not an aerodynamic plane and needs very high
    > > maintenence control systems to keep it from what it naturally
    > > wants to do, that is, crash horribly. Aristotle had this idea
    > > that there were final causes, that there were purposes and ends
    > > built into the world and its objects. He was no Darwin, trust me.
    > > The US stealth bomber wants to crash no less than a stone wants
    > > to be reunited with its natural place when dropped. Edelman, you
    > > were wanting to know about this sort of thing, no?

    >
    > i...i got nothin.
    >
    > wtf?


    You got nothing? You got absolutely nothing? OK, let me tell you
    wtf: you need a course on Aristotle. Honestly, it helps with
    those "big account clients" you mention in a later post.

    Let me explain: big account clients tend to be running about with
    a million things and requirements in their heads. They truly
    appreciate perspective. They want and they crave the big useful
    picture. There is nothing more useful than the biggest picture of
    all. And that means only one thing: Aristotle. Trust me, there is
    big money to be made via Aristotle.

    (Hey JL... c'mon, what is obtuse about this now?)

    --
    dorayme
    dorayme, Jun 23, 2006
    #14
  15. Rivera

    Edelman Guest

    dorayme wrote:
    > You got nothing? You got absolutely nothing? OK, let me tell you
    > wtf: you need a course on Aristotle. Honestly, it helps with
    > those "big account clients" you mention in a later post.
    >
    > Let me explain: big account clients tend to be running about with
    > a million things and requirements in their heads. They truly
    > appreciate perspective. They want and they crave the big useful
    > picture. There is nothing more useful than the biggest picture of
    > all. And that means only one thing: Aristotle. Trust me, there is
    > big money to be made via Aristotle.
    >
    > (Hey JL... c'mon, what is obtuse about this now?)


    did you even read what you wrote? it was completely irrelevant to
    anything anyone said in this thread. i mean, aristotle was a great
    guy, i'm sure. but what you said was crazy talk. the stealth bomber
    is not aerodynamic? are you retarded?

    --
    Jason Edelman
    http://fixmysite.blogspot.com
    Edelman, Jun 23, 2006
    #15
  16. Rivera

    Neredbojias Guest

    To further the education of mankind, "Edelman" <>
    vouchsafed:

    > dorayme wrote:
    >> You got nothing? You got absolutely nothing? OK, let me tell you
    >> wtf: you need a course on Aristotle. Honestly, it helps with
    >> those "big account clients" you mention in a later post.
    >>
    >> Let me explain: big account clients tend to be running about with
    >> a million things and requirements in their heads. They truly
    >> appreciate perspective. They want and they crave the big useful
    >> picture. There is nothing more useful than the biggest picture of
    >> all. And that means only one thing: Aristotle. Trust me, there is
    >> big money to be made via Aristotle.
    >>
    >> (Hey JL... c'mon, what is obtuse about this now?)

    >
    > did you even read what you wrote? it was completely irrelevant to
    > anything anyone said in this thread. i mean, aristotle was a great
    > guy, i'm sure. but what you said was crazy talk. the stealth bomber
    > is not aerodynamic? are you retarded?


    No, it's a kind of mystique. She's always like that.

    Whatever you do, don't ask for any advice on thumbnails, either. (Although
    I didn't realize at the time, this could be due to the fact that she
    injured such a digit in what I hope wasn't just a masochistic act of
    oneupswomanship.)

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Jun 23, 2006
    #16
  17. Rivera

    dorayme Guest

    In article <Xns97EBA1500E420httpwwwneredbojiasco@208.49.80.251>,
    Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    wrote:

    > To further the education of mankind, "Edelman" <>
    > vouchsafed:
    >
    > > dorayme wrote:


    stuff...

    > > did you even read what you wrote? it was completely irrelevant to
    > > anything anyone said in this thread. i mean, aristotle was a great
    > > guy, i'm sure. but what you said was crazy talk. the stealth bomber
    > > is not aerodynamic? are you retarded?

    >
    > No, it's a kind of mystique. She's always like that.


    I must have missed our friend Edelman's post? What gave him the
    slightest idea that I had thought the stealth bomber
    was aerodynamic. He must have missed the bit where I said it was
    not and also the bit where the fact that it was not was the
    relevant fact to the issue at hand. And also JL's explantion.

    Boji, instead of licking your wounds over thumbnails and making
    low innuendoes, why don't you try explain these things to these
    really really really straight guys that flit in every now and
    again and think I am totally mad, be honourable and defend me. I
    sometimes have time to do it myself but in the next two weeks I
    need help. In return I will ask my mate Officer Bud White to go a
    bit easy on you.

    --
    dorayme
    dorayme, Jun 24, 2006
    #17
  18. Rivera

    Neredbojias Guest

    To further the education of mankind, dorayme
    <> vouchsafed:

    >> > dorayme wrote:

    >
    > stuff...
    >
    >> > did you even read what you wrote? it was completely irrelevant to
    >> > anything anyone said in this thread. i mean, aristotle was a great
    >> > guy, i'm sure. but what you said was crazy talk. the stealth
    >> > bomber is not aerodynamic? are you retarded?

    >>
    >> No, it's a kind of mystique. She's always like that.

    >
    > I must have missed our friend Edelman's post? What gave him the
    > slightest idea that I had thought the stealth bomber
    > was aerodynamic. He must have missed the bit where I said it was
    > not and also the bit where the fact that it was not was the
    > relevant fact to the issue at hand. And also JL's explantion.


    Hmm, I suspect he may have diagreed, though.

    > Boji, instead of licking your wounds over thumbnails and making
    > low innuendoes, why don't you try explain these things to these
    > really really really straight guys that flit in every now and
    > again and think I am totally mad, be honourable and defend me. I
    > sometimes have time to do it myself but in the next two weeks I
    > need help. In return I will ask my mate Officer Bud White to go a
    > bit easy on you.


    Are you asking me to be a <cringe /> gentleman? -For 2 weeks? Well, you
    caught me in a "funny" mood. I just got through watching "A Beautiful
    Mind". Though it quite good. And anything is possible.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Jun 24, 2006
    #18
  19. Rivera

    dorayme Guest

    In article <Xns97EBD89969BBFhttpwwwneredbojiasco@208.49.80.251>,
    Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html>
    wrote:

    > Are you asking me to be a <cringe /> gentleman? -For 2 weeks? Well, you
    > caught me in a "funny" mood. I just got through watching "A Beautiful
    > Mind". Though it quite good. And anything is possible.


    Yeah well, he is a bit of a twit in that one,,, it really is not
    him... how can Officer Bud White shake off his personality and
    turn to maths? Fat chance.

    --
    dorayme
    dorayme, Jun 24, 2006
    #19
  20. Rivera

    Neredbojias Guest

    To further the education of mankind, dorayme
    <> vouchsafed:

    >> Are you asking me to be a <cringe /> gentleman? -For 2 weeks? Well,
    >> you caught me in a "funny" mood. I just got through watching "A
    >> Beautiful Mind". Though it quite good. And anything is possible.

    >
    > Yeah well, he is a bit of a twit in that one,,, it really is not
    > him... how can Officer Bud White shake off his personality and
    > turn to maths? Fat chance.


    Maybe somebody squared his root.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Jun 24, 2006
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Graham

    Re: CSS positioning help - Mozilla

    David Graham, Jun 28, 2003, in forum: HTML
    Replies:
    1
    Views:
    5,473
    Lorne Cameron
    Jun 28, 2003
  2. brucie
    Replies:
    8
    Views:
    1,991
    Wipkip
    Jun 29, 2003
  3. Ilya
    Replies:
    9
    Views:
    1,796
  4. sagejoshua
    Replies:
    2
    Views:
    478
    sagejoshua
    Oct 10, 2005
  5. David Smithz
    Replies:
    5
    Views:
    660
    Jonathan N. Little
    May 22, 2006
Loading...

Share This Page