I have a container div that contains 2 children divs: the first one, stick to his father's left border, contains a list of buttons while the second one contains the content. Long story short, it works like a tab navigator, with the buttons on the left.
The problem I have is with the buttons container height, that I'd like it to be 100% of his parent div. I don't want to give a fixed height to the container div, because I want the container to change accordingly to his content height..
As you can see in the fiddle below, the ul right border is not touching the container bottom edge..
here's some code
HTML
<div id="container">
<div id="buttons">
<ul>
<li>button 1</li>
<li>button 2</li>
<li>button 3</li>
<li>button 4</li>
</ul>
</div>
<div id="content">
asdasdasdasdas<br>
...
asdasdasdasdas<br>
</div>
</div>
CSS
#buttons{
background: lightgray;
width: 150px;
float: left;
border-right: 1px solid black;
height: 100%
}
#content{
padding: 15px;
float: left;
}
#container{
/*-- adding fixed height here, works*/
/*height: 300px;*/
display: inline-block;
border-left: 1px solid black;
}
FIDDLE
what I've currently done -->http://jsfiddle.net/BeNdErR/kVcds/
the result I'd like to achieve, without the fixed height --> http://jsfiddle.net/BeNdErR/kVcds/2/
another case that I'd like to be covered: content shorter than the buttons div --> http://jsfiddle.net/BeNdErR/kVcds/8/
Any idea or solution to this problem?
Thanks in advance, best regards
You can do this by using absolutely positioning the #buttons div within the parent.
For this, first declare relative positioning on the parent
#container {
position:relative;
min-height:200px;/* if you can reliably set a minimum height */
}
#buttons {
position:absolute;
height:100%;
width:150px;
}
#content {
margin-left:150px;
}
Because the absolutely positioned button elements are now out of the page flow, you can add a margin equal to the width of the #buttons div to the #content div so that it still is in the right place.
See the updated fiddle:
http://jsfiddle.net/kVcds/3/
You might want to refer to this links. It will likely get you what you want, but it's not as simple as you would have probably have wanted it.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Hope this helps!
Related
I have two or more divs which need to overlap each other (due some transition effects, i.e. switching tabs and slow disappear).
Below these two divs there is a footer element.
If I use position: absolute the parent element collapses and divs overlaps the footer element.
I can calculate tallest height in scripts. But maybe there is CSS way to keep parent element's height together with tallest one, but let children visually overlap?
EDIT: width of the children is unknown as well, as design is responsive.
.parent{
border: 1px solid green;
position: relative;
}
.one{
background-color: red;
position: absolute;
width: 300px;
}
.two{
background-color: blue;
position: absolute;
width: 400px;
}
footer{
border: 1px solid magenta;
text-align: right;
}
<div class="parent">
<div class="one">
Div one to overlap. Height unknown, width unknown<br>
Div one to overlap. Height unknown, width unknown<br>
Div one to overlap. Height unknown, width unknown<br>
</div>
<div class="two">
Div two to overlap. Height unknown, width unknown<br>
Div two to overlap. Height unknown, width unknown<br>
</div>
<!-- ... --->
<footer>
Footer must be below all divs
</footer>
</div>
No, this is not possible with CSS only on elements with absolute position. Have a look at the answers of this post for a detailed explanation.
if you want to achieve your goal, you can't use absolute position. Because absolutely positioned elements are taken away from the normal layout. Parent element doesn't know about its height.
you can do in the following way:
live Jsfiddle
CSS:
parent{
border: 1px solid green;
}
.one{
background-color: red;
float: left;
width: 300px;
}
.two{
margin-left:-300px;
float: left;
width: 300px;
background-color: blue;
}
footer{
clear: both;
border: 1px solid magenta;
}
HTML:
<div class="parent">
<div class="one">
Div one to overlap. Random unknown<br>
Div one to overlap. Random unknown<br>
Div one to overlap. Random unknown<br>
</div>
<div class="two">
Div two to overlap. Random unknown<br>
Div two to overlap. Random unknown<br>
</div>
<!-- ... --->
<footer>
Footer must be below all divs
</footer>
</div>
Limitations:
you have to know the widths of the divs
you have to use same width either or use left margin value as the negative value of the larger width of the previous divs.
Explanation:
Floated elements sit side by side. If you use the negative value of margin-left, it will overlay on the previous div. Then you set clear property to both for footer which makes the footer stay at the bottom all the divs.
ul.horiz {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.horiz > li {
display: inline;
}
<ul class="horiz">
<li>This is the first item text</li>
<li>X</li>
</ul>
I want to have a horizontal list of two items fit in a div 100% of the div (so it adjusts as the browser (and div) changes width. The second list item should have a fixed width and the first item should fill the remaining space.
I'm not sure how this is possible. I don't want to do percentages, if possible.
It doesn't necessarily have to be a list (i.e. ul/li), but that was my initial thought.
The first item would be text content and the second item would be an image.
Check out this fiddle I've put together: http://jsfiddle.net/xvo2682e/
It uses the following HTML/CSS:
.main
{
width: 100%;
overflow: auto;
}
.scaling_left
{
margin-right: 100px;
background-color: #D9F2D0;
}
.fixed_right
{
float:right;
width: 100px;
background-color: #efefef;
}
<div class="main">
<div class="fixed_right">
Right Column is skinny.
</div>
<div class="scaling_left">
Left column is variably fat.
</div>
</div>
Basically, don't float the div whose width you want to scale with the page. Then give that scaling div a margin equal to the width of the fixed-width div on the same side that you float it to.
[Display table approche][1]
If I understand what you are asking for correctly, this might be one of the way [1]: http://jsbin.com/tonovupite/1/edit?html,css,output
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
This is probably easily answered by those who know coding properly. I am pretty much self-learned so far and only have 3-4 hours of coding in HTML and CSS behnd me.
I made a container and put in two more containers in it. A basic h2+p as a sort of intro section, and another h2+ul+p section as an about-me section.
I wanted the two inside another since I wanted the parent to have a background image that stretches behind both of the other containers.
However, when I am doing this the second child is stretching outside the boundaries of the parent container. The first (leftmost) child and parent are aligned on the height. But I am struggling to understand why the parent doesn't adjust the height so it will contain the full height of the second child as well.
I've added a border around each so you can see it easier. You see the border of the parent between the two child .
http://imageshack.com/a/img745/8052/7Z4yGO.png
<!-- the HTML code -->
<div id="midSection">
<div id="introPara">
<h2>Introduction</h2>
<p> ---- snipped out ---- </p>
</div>
<div id="bioInfo">
<h3>About me</h3>
<ul id="bioInfoList">
<li>Name: Roger</li>
<li>Nicks: Red Fox Four & Ghroznak</li>
<li>From: Norway</li>
</ul>
<p> ---- snipped out ---- </p>
</div>
</div>
/* CSS styling */
#midSection { /* This is the parent div */
border: solid 1px;
height: 0 auto;
clear: right;
}
#introPara { /* Left side intro div */
border: solid 1px;
padding: 0px 10px 0px 10px;
width: 60%;
height: 100%;
display: inline-block;
}
#bioInfo { /* Right side about div */
padding: 0px 10px 0px 10px;
border: solid 1px;
width: 300px;
display: inline-block;
position: relative;
float: right;
clear: left;
}
Whenever you float a container its parent does not consider its height.You have given float:right on 2nd container that's why the parent is not considering its height and goes only till 1st child container height.
#Original Problem Fix- Add a container after 2nd child that clears the float so that parent container takes full height.
<div style="clear:both;">
Js fiddle Demo: http://jsfiddle.net/9a0cep55/1/
#2nd Problem that i can see - Even after this your layout will break when width of window is reduced as you have hard coded width of 2nd container to 400px.
When you re-size window to smaller size the 2nd container will wrap below 1st, my guess you don't want that.
I will recommend that you give 2nd container width also in percentage as width:40% and add style 'box-sizing: border-box;' on both containers so that borders and padding becomes part of width.
JS Fiddle Demo :http://jsfiddle.net/jr5bnLef ( This layout will not break at any window size)
Use clear it will fix the issue
check the JS Fiddle
.clear{
clear:both;
}
<div class="clear"></div>
edit
changed fixed width to %
JS Fiddle
Here is a preview of what I have so far:
The red area is part of the design and should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.
I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.
What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.
footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }
Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this?
My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.
we use a sticky footer as well - here's the basics:
<div id="container">
<div id="header">Header</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>
Note the clearfooter before the end of the container. Then with CSS you need something like this:
html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
.clearfooter {
height: 330px;
clear: both;
}
#footer {
height: 330px;
position: relative;
}
The only downside is that this is a fixed height footer. Don't forget, too if you add any padding to your footer that increases the height and your height on the footer, clearfooter and negative margin on the container need to be adjusted accordingly.
If you happen to need it to work in IE6 you'll need to target the container however you'd like and use:
#container {
height: 100%;
}
Hope that helps!
Sticky footers can be tricky and adding an over lapping background can be even more tircky. What you might want to try is creating a Sticky footer and applying the background image to the body or container background repeating-x and position bottom.
Are you able to create a jsfiddle and I can show you the technique I mean.
When you are offsetting something with position: relative, the element still "reserves" the space it would have occupied otherwise - in your case, the bottom area where you get the whitespace. Set margin-bottom: -115px on your footer to tell it not to do that.