/    Sign up×
Community /Pin to ProfileBookmark

CSS Div Layout – Making it work in IE

Copy linkTweet thisAlerts:
Jan 05.2006

Ok, for starters the website is [url=”http://team241.hopto.org”]here[/url]. Im using what i think is known as a 3 box layout. I have a left div for the Navigation Links, I have a right div for news, and I have a center div that fits nicely in the middle of the two in Firefox. In IE the div does not appear inbetween them, it places the center div below the left and right ones. The HTML is laid out like this (pseudo-code):

[CODE]
<left div> <!– this is floated to the left –>
</left div>

<right div> <!– this is floated to the right –>
</right div>

<centerwrapper div> <!– this is not floated at all –>

<banner div>
</banner div>

<content div>
</content div>

</centerwrapper div>[/CODE]

Does anyone know a tricky way around IE’s disgusting rendering of my page?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ShrineDesignsJan 05.2006 — example:

CSS#wrapper {
width: 760px;
/* don't clear, does funny things in mozilla/opera if any children are floated */
}
#left {
float: left;
width: 130px;
}
#right {
float: right;
width: 130px;
}
#middle {
float: none; /* or float left, but no clear */
width: 600px; /* unecessary */
}HTML...
&lt;div id="wrapper"&gt;
&lt;div id="left"&gt;left&lt;/div&gt;
&lt;div id="right"&gt;right&lt;/div&gt;
&lt;div id="middle"&gt;middle, must occur after right&lt;/div&gt;
&lt;/div&gt;
...
Copy linkTweet thisAlerts:
@StudioMexJan 05.2006 — Here is another way...

they html and css was change. Since you have borders width of 2px and set width on those three elements and your wrapper is also set to a set width, well some changes had to be made... ?

Sample Link

[URL=http://www.unisitio.com/test009.html]http://www.unisitio.com/test009.html[/URL]

Hope this helps u too!!!
Copy linkTweet thisAlerts:
@Armageddon00authorJan 06.2006 — Thanks Studio, your solution worked perfectly. It still looks better in Firefox, such as the borders in IE dont have the green background. Is it possible to force IE to render a green background to the dashed borders?
Copy linkTweet thisAlerts:
@StudioMexJan 06.2006 — Well, you can put a extra div that wraps your #sidebar, #news, etz...with that green background.

IE renders dahsed line different from FF or safari ( like alwasy :rolleyes: ) I did a sample on the same link i posted above (here it is again)

[URL=http://www.unisitio.com/test009.html]http://www.unisitio.com/test009.html[/URL]

I put a div that wraps your #footnote as u can see it get rid off the white space between dahsed lines in IE

You can do this and it works, but it adds a few extra divs to your page. I don't know if is ok with u or not...

Hope this helps you
Copy linkTweet thisAlerts:
@BrettNooyenJan 09.2006 — It seems you found a solution to your problem, but just remember you don't even need to use float: right;

Have all 3 float:left; and they will all line up next to eachother.

Probably just a preference in coding is all.
×

Success!

Help @Armageddon00 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...