Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

floating element pushes content away? 2

Status
Not open for further replies.
LaundroMat

LaundroMat

Programmer
Dec 2, 2003
67
BE
Hi,

Say I have two DIV's.
Properties are:
Code: 
#left {
	float: left;
}
#middle {
	text-align:	center;
	background-color: #eee;
	margin-top:	10px;
	margin-bottom:	20px;
	padding:	10px;
}
When I put #left" before #middle, left disappears, and the text in #middle is centered allright. And, if #left is embedded in #middle, the text in #middle is shifted a bit to the right (and thus not centered anymore).

How can I prevent the shift to the right, and keep #left visible?
 
Sort by date Sort by votes

BTW - If what I suggest above doesn't fix it, can you enclose the HTML code please? Not sure what the 2 DIV elements are contained in, etc etc etc.

Thanks,

Dan
 
Upvote 0 Downvote
Yes, and the problem there is that #left is no longer related to #middle, so that it jumps to the next line.
 
Upvote 0 Downvote
Code: 
<html>
<head>
	<title></title>
<style type=&quot;text/css&quot;>
#topMenu {
	text-align:	center;
	background-color: #eee;
	margin-top:	10px;
	margin-bottom:	20px;
	padding:	10px;
	z-index:	1;
}
#usergreet {
float:	left;
z-index:	10;
}
</style>
</head>
<body>
<div id=&quot;topMenu&quot;>item | item | item | item | item
</div><div id=&quot;usergreet&quot;>Hello user!</div>
</body>
</html>
 
Upvote 0 Downvote
That's the problem with DIV's - they are treated as blocks of text, a bit like paragraphs.

Have you tried SPAN's instead, since they will follow on from each other?

I'm still not 100% clear on what you are trying to achieve. Do you want something like - I'll write it in a table for formatting purposes:
<table width=&quot;100%&quot; border=1>
<tr align=&quot;center&quot;>
<td width=&quot;1%&quot; align=&quot;Left&quot;>Left</td>
<td width=&quot;99%&quot;>Middle</td>
</tr>
</table>

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote

Hmm..

Maybe I've misunderstood what you are saying, or maybe I'm totally confused since you renamed your DIV's ;o)

Either way, the code you gave seems to look fine to me, in that &quot;item | item | item | item | item&quot; (#middle / #topMenu) is centred, and #left (#usergreet) is visible.

Have I misunderstood, or did you post fixed code?

Dan

 
Upvote 0 Downvote
Yes, that's exactly what I'm trying to do, but without tables. I'm pretty fond of that whole &quot;css-instead-of-tables&quot; stuff :)

But, hey, thanks for the SPAN hint. This actually works:

Code: 
<div id=&quot;topMenu&quot;>
Center center center
<span id=&quot;usergreet&quot;>Hello</span>
</div>

Have a star!
 
Upvote 0 Downvote
Ack!

It still pushes the content of #middle (or rather: #topMenu) to the right!

Gnnh.
 
Upvote 0 Downvote
LaundroMat,

I've had another play with your code...

<html>
<head>
<title></title>
<style type=&quot;text/css&quot;>
#topMenu {
text-align: center;
background-color: #eeeeee;
padding: 10px;
}
#usergreet {
float: left;
}
</style>
</head>
<body>

<div id=&quot;topMenu&quot;><span id=&quot;usergreet&quot;>Hello</span>center center center</div>

</body>
</html>

Hopefully this should work.

Obviously, it will start to wrap when your browser window is TOO small. :)

NOTE: You should always enter #rrggbb (2 values) for each of your RGB values for colors.

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote

LaundroMat,

I feel this is what you're after:

Code: 
<html>
<head>
<style type=&quot;text/css&quot;>
#topMenu
{
    margin-top:    10px;
    margin-bottom:    20px;
    padding:    10px;
    background-color: #eee;
}
#menuText
{
    text-align:    center;
}

#userGreet
{
	position:absolute;
}
</style>
</head>

<body>
	<div id=&quot;topMenu&quot;>
		<span id=&quot;userGreet&quot;>Hello</span>
		<div id=&quot;menuText&quot;>centre centre centre </div>
	</div>
</body>
</html>

The &quot;centre centre centre&quot; is centred in the gray box - without taking the width of &quot;Hello&quot; into account.

Hope this helps!

Dan
 
Upvote 0 Downvote
What you are experiencing is correct behaviour. The change from div to span should not make any difference (it does not on IE6, Mozilla 1.5 and Opera 7.22), because when you apply float property to an element (and it is not none), that element automatically becomes a block element and ignores any display property you set to it. If changing div to span solved your problem then it is a quirk in your browser.

About the centering of content. The text was centered but at the same time wrapped around the floating element, which caused the content to shift. But this is what you want to achieve when you are floating elements. If you want to have something floating on the left and the rest of the content aligned to center (without the size of that left element interfering with the alignment) you need to employ absolute positioning. The simple idea of just absolutely positioning the usergreet element did not work in IE, because it misinterprets the text-align: center; property which caused the absolutely positioned text to hover in the center. That is why I needed to add the paragraph which actually centered the content. Anyway, here is a IE6, Mozilla 1.5, Opera 7.22 compliant solution of what I think you wanted:
Code: 
<html>
<head>
    <title></title>
<style type=&quot;text/css&quot;>
#topMenu {
    position: relative;
/*    text-align:    center;*/
    background-color: #eee;
    margin-top:    10px;
    margin-bottom:    20px;
    z-index:    1;
}

#topmenu p {
   position: relative;
   text-align: center;
   padding:    10px;
}

#usergreet {
	position: absolute;
	left: 10px;
	top: 10px;
}
</style>
</head>
<body>
<div id=&quot;topMenu&quot;>
 <div id=&quot;usergreet&quot;>Hello user!</div>
 <p>item | item | item | item | item</p>
</div>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Lets Code
  • Locked
  • Question
Inline element into a block level element
Replies
1
Views
245
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
931
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
134
CoolBreeze007
CoolBreeze007
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
243
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
How do I place an element at the center of its' ancestor? 1
Replies
5
Views
180
datamasher
datamasher

Part and Inventory Search

Sponsor

Back
Top