I know that parent divs can't be expanded to the height of an absolutely-positioned child with pure CSS and I found one solution that addresses this with some js: http://jsfiddle.net/6csrV/7/
But what if you have multiple columns, each positioned absolutely, and you don't know which one will be tallest? For example:
<div class="parentWrapper">
<div class="column column1">This content may be 4 lines long</div>
<div class="column column2">This content may be 8 lines long</div>
<div class="column column3">This content may be 5 lines long</div>
</div>
To add yet another challenge, the number of columns may also differ, so it should be possible to target the generic "column" class rather than column1, column2, column3 etc...
And to make it even more of a challenge, is it possible to have this work only when the browser viewport is narrower than a specified number of pixels?
Use height:auto for the layer http://jsfiddle.net/saysiva/PuVvh/1/
#container {
width:500px;
position:absolute;
left:200px;
vertical-align:center;
}
#mainContainer {
border:0px solid red;
height:auto;
}
#menu {
background-color:#FFD700;
height:auto;
width:100px;
float:left;
}
#content {
background-color:#EEEEEE;
height:auto;
width:400px;
float:left;
}
Related
I want to position a div element when the height of another div element is increased dynamically in other words i don't want the first div element to overlap second div element when its height is increased. How can i do that.
Like this:
function f() {
$(".fchild").height("+=100");
}
.parent {
width:50%;
display:inline-block
background-color:blue
}
.fchild {
width:100%;
height:100px;
background-color:red;
}
.cchild {
width:100%;
height:100px;
background-color:green;
}
.btn {
position:absolute;
bottom:0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="fchild">
</div>
<div class="cchild">
</div>
</div>
<button class="btn" onClick="f()">Increase height</button>
Notice how, when you press the "Increase height" button, the height of the red box increases, but the green box moves down the same distance. All I have done here is I have put the two divs inside the same parent div, which has a dynamic height.
I have a page with 3 elements, the first and second one float next to each other, but the third one has no float and has a width of 80%. For some reason it goes up with them, even though i'm adding float:none;
Here's my code:
<div class="elem1">
</div>
<div class="elem2">
</div>
<div class="elem3">
</div>
CSS:
.elem1{
width:40%;
height:200px;
float:left;
background:#f00;
}
.elem2{
width:40%;
height:200px;
float:right;
background:#ff0;
}
.elem3{
width:80%;
height:200px;
background:#f0f;
margin:auto;
float:none;
}
Here's a link: https://jsfiddle.net/woa0hvj9/
Try clearing the float. New fiddle here.
.elem3{
clear: both;
width:80%;
height:200px;
background:#f0f;
margin:auto;
}
Add a clear: both; to the .elem3 div. The third div is filling the space of the floated elements, so to avoid this use the clear property.
You need to clear floats.
A more commonly used (and better) technique by web professionals in such scenarios is called clearfix
Wrap the .elem1 and .elem2 in another div and give it a class say , .clearfix.
Use the after pseudo-element to the clearfix class. Add the following class to your css code:
.clearfix::after {
content: "";
clear: both;
display: table;
}
You can Self-clear the floating elements using:
overflow: hidden;
I have a range of buttons which I would like to space evenly across my nav bar. I could get the size of each button and work it out but I wonder is there a way of working this out automatically and setting these widths at as the page loads.
At the minute I have 5 buttons and an input field and would like to make these span a 800px div.
HTML:
<div class="nav">
<div class="nav_btn">HOME</div>
<div class="nav_btn">NEW IN</div>
<div class="nav_btn_drop_down">CLOTHING</div>
<div class="nav_btn_drop_down">ACCESSORIES</div>
<div class="nav_btn_drop_down">SHOP BY BRAND</div>
<div class="nav_btn"><form action="" method="POST"><input type="text" placeholder="Search..." /></form></div>
</div>
CSS:
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
}
You can use this trick using display:table-cell instead of float:
.nav_btn, .nav_btn_drop_down{
display:table-cell;
width:1%;
white-space:nowrap;
text-align:center;
}
Check this demo http://jsfiddle.net/xveV4/10/
I think padding would solve your problem:
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
padding: 10px;
}
Fiddle
Yes it is possible. You could always use percentages for the width of each nav_btn/nav_btn_drop_down.
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
box-sizing:border-box;
width:16.667%
}
Each item in your nav is itemcount/100 in width ~= 16.667%
See fiddle here:
http://jsfiddle.net/t9t2D/
I have an image with id myimage. It has a width of 300px and height 100px. each 100px wide portion has a unique color, like below
------------------------
| red | green | blue |
------------------------
Is it possible to use each portion (having width & height 100px) with different id so that the image can be used as a button with different functions to each portion??
Answer only if it is possible and comment for others.
thanks in advance...:)
Set your image as a background image and give the parent div position:relative property. Then use nested divs with position:absolute each 100px apart from one another.
<div id="wrap">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
#wrap{
background:transparent url(...) no-repeat 0 0;
width:300px;
height:100px;
position:relative;
}
.first, .second, .third{
position:absolute;
top:0;
width:100px;
height:100px;
}
.first{
left:0;
}
.second{
left:100px;
}
.third{
left:200px;
}
Now using JQuery you can reference each part individually.
$('.first').click(function(){ // this is the first part
alert('first clicked')
})
Check working example at http://jsfiddle.net/PrMzr/
I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.