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

problem with DIV Positioning in IE

Status
Not open for further replies.
tofuTnT

tofuTnT

Technical User
Jul 17, 2003
67
US
Hi All,

I am trying to fix this issue with my CSS. The page is located at I get exactly what I want in FF. That is SIDEBAR is on the right side of CONTAINER, FOOTER is at the bottom (clear both), most importantly, any table inside CONTENT with width over 600px (or over 750px) can overflow to the right without changing position of SIDEBAR.
FF shows exactly what I want. IE, however, push the SIDEBAR down if the table width is larger than 550px.

Is there any easy way to fix it?

Thank you!

tofuTnT

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<div id="container" style="width:700px;text-align:left;color:#333; position:relative; text-align:left;margin:0 auto; border: 1px solid yellow;">
	<div id="main" style="width:700px;border:1px solid black">
		<div id="content" style=" float:left; width:550px; border:1px solid red; margin:1px">
			Content <br />Content <br />Content <br />Content <br />Content <br />Content <br /><br /><br />
			<table width="600px" border="1">
				<tr><td>Table with width over 600px</td></tr>
			</table>
			Content <br />Content <br />Content <br />Content
		</div>
		<div id="sidebar" style="float:left; width:140px; border:1px solid blue;margin:1px">
			Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />
		</div>
	</div>
	<div id="footer" style="clear:both; width:700px; border:1px solid green;">
		FooterFooterFooterFooter
	</div>
</div>
<body>
</body>
</html>
 
Sort by date Sort by votes
hey tofuTnT...

im new to tek-tips but i just saw your post and i had a similar problem with an old page that i made. it worked for me and it shouldn't give you a problem.

all you have to do is insert "overflow : auto;" into the style part of your code. your code will look like this:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<div id="container" style="width:700px;text-align:left;color:#333; position:relative; text-align:left;margin:0 auto; border: 1px solid yellow;">
    <div id="main" style="width:700px;border:1px solid black">
        <div id="content" style="overflow:auto; float:left; width:550px; height:322px; border:1px solid red; margin:1px">
            Content <br />Content <br />Content <br />Content <br />Content <br />Content <br /><br /><br />
            <table width="600px" border="1">
                <tr><td>Table with width over 600px</td></tr>
            </table>
            Content <br />Content <br />Content <br />Content
        </div>
        <div id="sidebar" style="float:left; width:140px; border:1px solid blue;margin:1px">
            Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br 

/>Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />
        </div>
    </div>
    <div id="footer" style="clear:both; width:700px; border:1px solid green;">
        FooterFooterFooterFooter
    </div>
</div>
<body>
</body>
</html>

let me know if this helps,
Joey Figs
 
Upvote 0 Downvote
Hi Joey,

I just tried your code. That doesn't exactly solve the problem, because it adds scroll bar to the CONTENT div. If the table width in the CONTENT div is larger than 590px. User has to scroll to the right to see entire content.

tofuTnT
 
Upvote 0 Downvote
yeah i compromised with the scroll bar at the time and never really looked back into it. i don't know how strict you are with the page size but off the top of my head the things you could try are:
1)make the entire page wider and fit them that way
2)give the sidebar less width (depending on the content you plan to put into it)
3)give the content div a longer height and fit your table that way

if none of those are options for you, i'll look into an alternate way for you but it would make it easier if you give me an idea of the content that will be filling the divs.

Joey Figs
 
Upvote 0 Downvote
There will be some straight text which doesn't have any problem.

There will be some tables with width over 700 px and image with width over 700px. The worst thing is that the width is out of my control.

tofuTnT
 
Upvote 0 Downvote
o alright. i got most of it.
what width is out of your control?
 
Upvote 0 Downvote
If there is a table or image with width over 600px in CONT DIV, the SIDEBAR got pushed below CONT instead of staying side by side. The code in my original post is messed up in IE, even though it was working in FF. idealy, i like IE to show the page same way as FF :)
The link to the same page is


tofuTnT
 
Upvote 0 Downvote
i undderstand the whole thing with it pushing the sidebar to the next line, its just that the ways the 2 browsers read the code, for some reason...some properties are interpreted differently.

after trying a bunch of different methods i finally got it for you. it now works in both ff and ie and you should be able to use this without problems. the solution is using absolute positioning. i wasn't sure how familiar you were with this so i made the code for you that displays the exact same thing that is on your site. the only difference is you assign the positioning of the different divs and by doing this they are able to overlap without the sidebar going to the next line in ie. if your not sure how to use this, you can just add the content because it doesn't affect any of the positioning so all the divs are all set for you to use. hope i helped you with your problem and sorry it took as long as it did for me to realize the way around it. let me know asap how it worked out for you, just to make sure that all went smoothly. enjoy!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<div id="container" style="width:700px;text-align:left;color:#333; position:relative; text-align:left;margin:0 auto; border: 1px solid yellow;">
    <div id="main" style="width:700px;border:1px solid black">
        <div id="content" style=" position:absolute; float:left; width:550px; border:1px solid red; margin:1px">
            Content <br />Content <br />Content <br />Content <br />Content <br />Content <br /><br /><br />
            <table width="600px" border="1">
                <tr><td>Table with width over 600px</td></tr>
            </table>
            Content <br />Content <br />Content <br />Content
        </div>
        <div id="sidebar" style="position:absolute; top:0px; left:560px; float:left; width:140px; border:1px solid blue;margin:1px">
            Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br 

/>Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />
        </div>
    </div>
    <div id="footer" style="position:absolute; top:327px; left:0px; clear:both; width:700px; border:1px solid green;">
        FooterFooterFooterFooter
    </div>
</div>
<body>
</body>
</html>
 
Upvote 0 Downvote
Absolute positioning is one of the methods that I tried. Unfortunatelly, it screws up "Clear:Both". In your code, if you add more content to either CONTENT or SIDEBAR div, you can see that they overlap with FOOTER. I'd love to see footer got pushed down as far as required. so
Code: 
<div id="footer" style="position:absolute; top:327px; left:0px; clear:both; width:700px; border:1px solid green;">
        FooterFooterFooterFooter
</div>
top:327px is not flexible.

I have pulled half of my hair out :(

tofuTnT
 
Upvote 0 Downvote
Yes, I hate putting a table of width 600px inside a cell of width 550px :(
But that is what I was given and the site owner do have some table with width over 600px.
I am actually trying to clean up after someone else's design, and hope there is an easy way to do it.
I probably have to redo the design myself now :)

thanks all!

tofuTnT
 
Upvote 0 Downvote
alright if the absolute positioning doesn't work for you, then i guess the last resort is redesigning the page. hopefully you'll get the results you wanted with the new code. let me know if you need any help or if you have a problem, i'll try everything i can to help you out. good luck tofuTnT.

--Joey Figs
 
Upvote 0 Downvote
Yes, I hate putting a table of width 600px inside a cell of width 550px :(
But that is what I was given
Click to expand...

As long as you realise that you can NEVER fit a 600px wide element inside a 550px wide element. It CANNOT be done.

Just so you don't keep trying to do it.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
345
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
420
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
695
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
726
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
649
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top