Clever Geek Handbook

<div> inside another <div> of the same percentage but an internal match?

I have div

in div

, both of them are percentage based for the page, but the nested one div

overlaps slightly to the right.

I'm actually trying to get the white square to sit inside the first blue div

with a little bit margin

on all sides, so you can see the slightly darker background, making it stand out more.

Editing to indicate that the point position:fixed

is to make the white box move as you scroll.

A solution has been posted that showed the change position

to before relative

, although this clearly does not allow the window to be moved.

JSFiddle

enter image description here

div {
	border-radius: 5px;
}

#header {
	height: 50px;
	background-color: #F38630;
	margin-bottom: 10px;
}

.left {
    height: 1300px;
	width: 25%;
	background-color: #A7DBD8;
	float: left;
	margin-bottom: 10px;
}

.right {
	height: 1300px;
	width: 75%;
	background-color: #E0E4CC;
	float: right;
	margin-bottom: 10px;
}

#footer {
	height: 50px;
	background-color: #69D2E7;
	clear: both;
}

#fixedleft {
    height: 50px;
    width: 25%;
    background-color: #FFFFFF;
    position: fixed;
 	margin: 1px 1px 1px 1px;
}
      

        
        
        
      

    
<html>
	<head>
		<title>Result</title>
	</head>
	<body>
		<div id="header"></div>
		<div class="left"><div id="fixedleft"></div></div>
		<div class="right"></div>
		<div id="footer"></div>
	</body>
</html>
Run codeHide result


+3


source to share


4 answers


Your margin increases with width.

Try:



#fixedleft {
    height: 50px;
    width: calc(25% - 2px);
    background-color: #FFFFFF;
    position: fixed;
    margin: 1px;
}
+2


source


I assume this problem is caused by the default value body

margin

, since it does not affect width

yours fixed

div

(as you can see in the example, it width

is always the same no matter what value margin

you set, as opposed to the container width

):

body { margin:0; }


There is still a problem with the inner margin

( 1px

) pushing it out of the container, you can use for it calc

, here is an example:

JSFiddle

+1


source 


#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}

Please try this instance

#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;

}
0


source


if you load jQuery ..

$(window).bind("resize", function(){
    $("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
0


source






More articles:


All Articles