I have a div inside other div. The second div is showend only with jquery function with hover.
But i'm having some issues with second div border. Isn't showing complete like the first div.
Here's my css.
First div:
#featuresFirst #featuresLeft {
float: left;
width: 66%;
height: 100%;
background-color: yellow;
margin-right: 5px;
margin-left: 5px;
}
The second div:
.featuresInfo {
position: relative;
width: 100%;
height: 100%;
border: 2px solid #6000ff;
}
FIDDLE
Add:
box-sizing: border-box;
To both #featuresFirst #featuresLeft and .featuresInfo.
Related
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I have a set of divs that vary in size depending on an image inside it. Inside each div I would like two more divs, one is floated left and the other is floated right, like so:
I sort of accomplished it this way ... html:
<div class="image-wrap">
<img src="{{ img }}">
<div class="lookbook-title"><h5 >{{ title }}</h5></div>
<div class="item-buy">{{ theme:partial src="_buynow" }}</div>
</div>
and css:
div.image-wrap {
max-height: 1000px;
max-width: 100%;
border: 0;
display: inline-block;
height: auto;
box-sizing: border-box;
}
.lookbook-title {
position: relative;
top: -36px;
float: left;
padding-left: 10px;
padding-right: 10px;
color: #f7f7f7;
}
.item-buy {
position: relative;
top: -56px;
float: right;
padding-right: 20px;
pointer-events: none;
-webkit-font-smoothing: antialiased;
fill: #f7f7f7;
}
The reason I say "sort of" is because it initially was working just fine, but now the floated divs are appearing on above and outside their parent divs. What is interesting is that if I inspect the problem with dev tools and uncheck and recheck the "float" on either div both go back to where I want them to go...
You need to clear your floats.
Here is a interesting article that explains it in detail: http://css-tricks.com/snippets/css/clear-fix/
Hope this helps.
You should use position: absolute; for your 'floating' elements instead of float.
You'll need to add position: relative; to the parent wrap element - this will tell the children to respect the bounds of this element instead of floating somewhere outside of it. Then you can add position: absolute; to each of the children that you want to float and use top, bottom, left, right to control where the box is positioned. Experiment with different values to get the hang of it.
div.image-wrap {
height: 300px;
width: 400px;
position: relative;
border: 1px solid red;
}
.lookbook-title,
.item-buy {
background: white;
position: absolute;
bottom: 10px;
height: 100px;
width: 100px;
}
.lookbook-title {
border: 1px solid lime;
left: 10px;
}
.item-buy {
border: 1px solid blue;
right: 10px;
}
<div class="image-wrap">
<img src="http://www.placehold.it/400x300.jpg">
<div class="lookbook-title"><h5>Div 1</h5></div>
<div class="item-buy">Div 2</div>
</div>
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
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>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #content.
FIDDLE: http://jsfiddle.net/Zfcba/
HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.
Note: I tried the same without the outer div (http://jsfiddle.net/Zfcba/1). Still the same problem. :(
Add this to your css
#above{position:absolute;}
z-index only works for absolute positioned elements. As the browser ignores the value for z-index, it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav, #content will be displayed over #nav.
I want to create a two column layout with the right floated column containing a div that becomes scrollable once its content overflows the browser window height.
This is the html code that I am working on:
<div class=container>
<div class=column_A>A</div>
<div class=column_B>B
<div class=content>C<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>C
</div>B
</div>
</div>
And this is the css code:
.column_A {
float: left;
border: black solid 2px;
height: 500px;
width: 65%;
background: red;
}
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
}
.content {
border: white solid 3px;
overflow: auto;
background: green;
}
The scroll is currently on the browser window, how do I transfer it to the content?
You use overflow: auto like this:
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
overflow: auto;
height: 600px; /* ? */
}
You need to specify the height for your right column, though.
EDIT: To answer your comment, the easy way to go about it is if you set your document body's height to 100%, like this:
body {
height: 100%;
}
Then use a custom percentage to set the column's height to your liking.
.column_B {
...
height: 99%; /* or whatever you need */
...
}