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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Floating in a block

Status
Not open for further replies.
dexeloper

dexeloper

Programmer
Oct 26, 2004
162
GB
Have a look at this:

<html>
<head>
<style>
#outer{background:#FFAAAA;margin-left:3px;margin-top:2px;margin-right:3px;border:1px solid #777777;}
#paneleft{float:right;width:28%;margin-left:4px;}
.configmenu {margin-left:10px;margin-right:50px; width:100%;padding-bottom:20px;border:1px solid #999999; font-size:8pt;background-color:#FFFFFF;}
</style>
</head>
<body>
<div id="outer"> &nbsp;
<div id="paneleft">
<div class='configmenu'>
Introduction
<br/>
</div>
</div>
</div>
</body>
</html>

The 'paneleft' block is outside the 'outer' block. If I take away the float property in the css 'paneleft' id then the 'paneleft' block goes inside the 'outer' block.
Why is this?
 
Sort by date Sort by votes
If it's only in IE, then it's likely a variation on the IE Float Model Problem.

Adding a width to #outer will solve it. e.g.
Code: 
#outer{ width: 80%; ...
As will floating #outer:
Code: 
#outer{ float: left;...

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Yep, making the outer float did the trick.

Many thanks traingamer.
 
Upvote 0 Downvote
And thank-you for that Vragabond.

All becomes clear. In a floaty sort of way ...
 
Upvote 0 Downvote
I think Vragabond may have hit on the better description of the problem! (Although it had some content with the &nbsp;)

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
645
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
632
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
178
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top