CODEWITHSUNDEEP
css-position
T.Todua
T.Todua

Reputation: 56341

Why "POSITION:RELATIVE" messes up things?

If you enable position:relative for the right one, you will see that it overflows the left one:

http://jsfiddle.net/bfwhoem5/1/

why? How to solve that (while maintaining position:relative too). Also, I want when mouseover with INSPECT, the right one should not be overflowed over left.

p.s. I dont wish calc, because it is not yet well supported...

Upvotes: 0

Views: 29

Answers (1)

Martin Hugo
Martin Hugo

Reputation: 184

Here is one solution:

#left {
  position:relative;
	float:left; width:180px; background:#ff0000;
}
#right {
  position:relative; 
	width: calc(100% - 180px);	background:#00FF00;float:left;
}
<div>
	<div id="left">
		leftttt
	</div>
	<div id="right">
		rightttt
	</div>
</div>

Your issue is with one div having a float and the other not - also if you are going to put two items side by side you cannot have one with a width of 100%, either they will go on top of each other or go to the next line depending on their position relative to each other.

Upvotes: 1

Related Questions