Css positioning help

R

Rivera

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
 
J

Jonathan N. Little

Rivera said:
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.
Click to expand...

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

Edelman.Jason

Jonathan said:
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 */
}
Click to expand...

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

Jonathan N. Little

Jonathan N. Little wrote:
Click to expand...
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.
Click to expand...

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

dorayme

Jonathan N. Little said:
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.
Click to expand...

or float both the same way...
 
J

Jonathan N. Little

dorayme said:
or float both the same way...
Click to expand...
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.
 
D

dorayme

Jonathan N. Little said:
The best strategy in my opinion is you use
the minimum number of floats to get what you desire avoids many IE
surprises.
Click to expand...

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
 
E

Edelman

Jonathan said:
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.
Click to expand...

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

dorayme

Edelman said:
the only time this creates a "dumbbell" effect is when you do it wrong.
Click to expand...

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?
 
E

Edelman

dorayme said:
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?
Click to expand...

i...i got nothin.

wtf?
 
J

Jonathan N. Little

Edelman said:
dorayme said:
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?
Click to expand...

i...i got nothin.

wtf?
Click to expand...

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

Edelman

Jonathan said:
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.
Click to expand...

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

Jonathan N. Little

Edelman said:
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.
Click to expand...

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

dorayme

Edelman said:
dorayme said:
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?
Click to expand...

i...i got nothin.

wtf?
Click to expand...

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?)
 
E

Edelman

dorayme said:
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?)
Click to expand...

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?
 
N

Neredbojias

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?
Click to expand...

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

dorayme

stuff...


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

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

Neredbojias

To further the education of mankind, dorayme
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.
Click to expand...

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.
Click to expand...

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

dorayme

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.
Click to expand...

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

Neredbojias

To further the education of mankind, dorayme
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.
Click to expand...

Maybe somebody squared his root.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Working on mobile css menu with plenty of frustration! 2
Interfering CSS 1
Not sure why drop-down is not working. 2
Need help with code on website (noob) 2
Horizontal menu bar header 2
I need help fixing my website 2
Help needed with code 5

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 103

Forum statistics

Threads
473,754
Messages
2,569,521
Members
44,995
Latest member
PinupduzSap

Latest Threads

Top