Put div on top of two floated divs

HTML & CSS
1

With the following code I get the right layout, except that the central div ends up behind the other two. I want the central div on top of the others.

When I move the last line of code to the top, then I lose the layout that I want because the other two elements jumps down to next section in the browser.

I want an oldschool solution, without z-index. Is it possible?

<div style="float: left; width: 30%; height: 100%; background: black; "></div>
<div style="float: right; width: 70%; height: 100%; background: grey;"></div>

<div style="width: 80%; height: 100%; background: lighgrey;"></div>
2

A position: relative on the lightgrey div should be enough to elevate it above the floated elements, like so, but it would be better if you provided a screenshot or a wireframe of what you are trying to achieve.

3

Hello PVgr. “Position” takes me to IE 7.0. I was hoping for a solution that would take me to 4.0 at least.
That’s why I’m trying with float



but it would be better if you provided a screenshot or a wireframe of what you are trying to achieve.

One div on the left, one div on the right, and one div on top of them.
The one on top must be visible (on top of the others) when they all have a background.

4

Internet Explorer 4 had basic support for position: relative. Fortunately, I don’t have to work with legacy browsers anymore, so I run out of ideas. Maybe you should feed that browser with a different stylesheet / design.

5

Do you seriously need to support IE4?

1 Like
6

I’d allow you to call IE7 a legacy browser. Pushing it, but okay.

If you have to actually code for IE4 then there’s a special place in hell for whomever is requiring it.

7 Likes
7

Not sure if it would do any good (I can’t test it either), but you could test if declaring the non floated div “display:inline” and in a following ruleblock declare it “display:block” again. The purpose would be to force a new formatting context to that div.

1 Like
8

If you mean IE4 then you would need to explain why this is necessary because for any other normal reason it would be nonsense to support IE4!

Indeed your floats of 70% and 30% will not work in any version of from IE7 ( possibly 8) and under due to its buggy rounding algorithms and the floats will not be side by side.

Also your 100% heights will fail unless you have an unbroken chain of 100% back to root.

You haven’t cleared the last div anyway so it’s background will slide under the floats with the html that you have.

Your descriptions don’t really make sense as nothing is positioned as such and z-index is not an issue here.

I’m guessing this is a float clearing question but it’s hard to tell what you want exactly.

If this is just a personal test for you on a very old computer system then that’s ok but you should realise that running any unsupported browser is a very high security risk and should be avoided at all costs:)

3 Likes
9

I took a look at the w3schools website. According to them, it should work well from 4.0. I haven’t tried it yet so I don’t know.

https://www.w3schools.com/cssref/pr_class_float.asp
10

One div on the left side and one on the right, and then one div over them both . The div over them both needs to be visible, and not hidden behind the other two divs.

Oldschool solution. ( No display, no position. Maybe something with tables if not with float? ) I dont know, but if you do please let me know :slight_smile:

11

W3schools has not always been a reliable resource although these days it is better than it was. It wasn’t nicknamed w3fools without good reason:)

Notwithstanding that fact ie4 did understand the float property but had literally hundreds of bugs associated with and unlikely to render a float in any usable way. It did also understand position which makes your original comment about z-index little strange although again it had many hundreds of bugs with most css properties that it proposed to support.

If you really want to support ie4 then your only viable option would be an html table.

You have not said yet why you need to support ie4 so this is all complete nonsense to discuss and a waste of everybody’s time - to put it bluntly:)

2 Likes
12

I think you need to relax. It’s not me wasting your time, you’re wasting your own time on this

Either it is possible or it is not possible. The reason WHY I want to do this does not contribute to a solution for it, and therefore it is not relevant. Maybe it’s fun to know, but it’s not important enough to call it all nonsense without it

13

Since this is your topic, could you please try what you find and what we suggest and post what happens?

When you do not, you are really wasting time for all of us, your self included. :slight_smile:

2 Likes
14

Sorry but you are the one asking for help and you should be going out of your way to give us all the relevant information we need to solve your problem. I don’t mean to appear awkward but I have been solving problems on this forum for over 20 years now and do know a little bit about what is required to pose a good question and get a good answer.

I gladly offer my help for free to people who are willing to learn and are able to supply relevant information to the problem in hand. Understanding why someone requires a specific solution is usually the most important part of the question. What is the point if I give you a solution for IE4 if it will not work in any other browser since? I need to know why you want to support IE4 and indeed if it is just IE4 or if you want modern browsers to work also.

If you has said that at the start it would have steered the whole thread in a completely different direction. If its just for fun and you don’t want to support any other browser properly then you could simply do this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%;
}
.nonsense {
	width:100%;
	height:100%;
}
.top{background:#d3d3d3;height:1px;}
.left{background:#000000;color:#fff;}
.right{background:#808080}

</style>
</head>

<body>
<table class="nonsense" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td class="top" colspan="2" height="1px">This is the top.<br>This is the top</td>
  </tr>
  <tr>
    <td class="left" width="30%">Left column</td>
    <td class="right" width="70%">Right column</td>
  </tr>
</table>
</body>
</html>

It’s not valid, its not pretty, and its not semantically correct but as it’s just for fun it doesn’t matter.

That is incorrect information and position is fully supported back to IE5 and indeed in IE4 (albeit with a myriad of bugs).

As I said originally your float method will not work in IE4 because of its rounding bug You would need to leave at least a 1% free space in order for the floats to not drop…

4 Likes
15

At the time you wrote your post, I had not received any suggestions that match my question.

And I have already replied to the suggestions I got about using modern techniques.

So what do you mean?

16

What could solve the issue is a new formatting context on that div. This trick should work also in IE4 iirc, this is very old school and it would be nice if you could confirm if it does.

But of course, if you only intend to use the style attribute on the tags it would be hard to declare the display first inline and then block in a following rule. :wink:

What was the result when you tried what you found at w3schools?

17

In old IE many bugs were mended by declaring “zoom” to the element, like:

<div style=“zoom: 1; width: 80%; height: 100%; background: lighgrey;”></div>

Please try and post what happened.

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.