I have 2 DIVs:
<div id="sidebar"></div>
<div id="content"></div>
How would i make the sidebar div stretch the same height as the content.
Thanks for any help.
UPDATE:
Here is my example code with other elements:
http://tinkerbin.com/tkp2FZLZ
it has a content DIV in the Middle and 4 divs that makes border which is a different color.
You can easily get your desired results through display:table-cell;
HTML
<div id="sidebar">sidebar</div>
<div id="content">content</div>
CSS
#sidebar {
display:table-cell;
width:100px;
background:red;
}
#content {
display:table-cell;
width:100px;
background:yellow;
height:200px;
}
i think you are looking like this ;-
http://tinkerbin.com/yqyX3mXg
try this
#sidebar { position: relative; }
#content { position: absolute; top: 0; bottom: 0; right: 0; }
<div id="sidebar">
<div id="content">
</div>
</div>
Use display: table-cell on both column.
That will (visually! and visually only. It's CSS) make them behave the same way as th/td cells. You can add table-layout: fixed; display: table on parent and some width on one or both columns to use the other table algorithm, the one that doesn't try to adapt to content but try to respect the widths YOU want.
HTML:
<div id="sidebar"></div>
<div id="content">typo in your code, an =" was removed</div>
CSS:
#sidebar, #content {
display: table-cell;
}
EDIT: compatible with IE8+
You'll have to use inline-block for IE6/IE7 ... that they don't understand (ha!). display: inline; zoom: 1 is the alternative for them, or you can also float these columns and use a technique named faux-column (tl;dr the background is on the parent and it's a visual fake, it appears to be on each column but it isn't)
EDIT2: vertical-align: top is also often required for such layout columns.
Set the same height for them, you could possibly even give them a float.
By the way you have a bug in your html, write it like so:
<div id="sidebar"></div>
<div id="content"></div>
And the css:
#sidebar{
width: 40px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid red;
}
#content{
width: 165px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid blue;
}
Example
Related
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
My goal is to put div with width=100vw, after that div there should be second div with width for example 300px (so that second div should be out of screen). I tried many things with float, display inline and so on, now I don't have any more ideas.
<div id="div1"></div>
<div id="div2"></div>
Here is fiddle with example code
https://jsfiddle.net/kg5ea4sc/5/
You can use white-space: nowrap on parent element and display: inline-block on two inner elements. Also maybe you want to add vertical-align: top so it will look like this Fiddle
.element {
white-space: nowrap;
}
#div1{
background: green;
display: inline-block;
width:100vw;
height: 80px;
}
#div2{
background: red;
display: inline-block;
width:300px;
height: 100px;
}
<div class="element">
<div id="div1"></div>
<div id="div2"></div>
</div>
https://jsfiddle.net/guanzo/kg5ea4sc/18/
The second div is outside of the screen. You'll have to manipulate either it's position or the overflow:hidden property on the container if you want to see it though.
HTML
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
#div1{
background: green;
width:100vw;
height: 80px;
}
#div2{
background: red;
width:300px;
height: 100px;
}
div{
display:inline-block;
}
#container{
width:100vw;
white-space:nowrap;
overflow:hidden;
}
Here is my fork of your fiddle: https://jsfiddle.net/nyzvbvo7/1/
You can scoll to the right to see the second div
What I changed:
I added
body {
width: calc(100vw + 300px);
margin: 0;
}
#div1, #div2 {
display: inline-block;
vertical-align: top;
}
So I made the body wide enough to hold both containers and set the container's display to inline-block. vertical-align: top; can be left out, the the containers will be algned at their baseline (which can vary depending on the content)
This is the layout i want,
I made some with code, but i'm not sure how to do after this.
[html]
<div id="content">
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
[css]
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50px;
}
#right{
float:left;
width: 50px;
}
#bottom{
/*what do i have to do in here?
float:*/
}
You could do something like this:
Set clear:both on #bottom. Add width:50% to both #left/#right.
Finally, specify the borders on the elements and add box-sizing in order to include the borders in the element's width calculations.
jsFiddle example
#content {
border:1px solid black;
}
#content > div {
height:100px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#left {
float:left;
width: 50%;
border-right:1px solid black;
}
#right {
float:right;
width: 50%;
}
#bottom {
border-top:1px solid black;
clear: both;
}
This is what you want for the bottom div:
#bottom{
clear: both;
}
For #bottom, you want float:left;width:100px; Just try that, see if it works.
You could also try using positions to do it, if you don't need the size of them to change:which it looks like you don't. For example:
#Left {width:50px;height:50px;position:absolute;left:0px;top:0px;}
#Right {width:50px;height:50px;position:absolute;left:50px;top:0px;}
#Bottom {width:100px;position:absolute;left:0px;top:50px;}
I feel much more confident the second will work.
Here is how I would do it personally: http://jsfiddle.net/T5fW3/
<div id="content">
<div id="top">
<div id="left">
<div class="container"> Left </div>
</div>
<div id="right">
<div class="container"> Right </div>
</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
I use a container so that if you want to add styles (border, margins, padding etc) they don't mess up the 50%. You can now resize content to whatever size and your proportions will still be the same.
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50%;
}
#right{
float:left;
width: 50%;
}
#bottom{
border: 1px solid black;
clear: both;
}
.container {
border: 1px solid black;
}
the border in the container class and bottom id is there just for illustration. If you were to add the border to #left or #right your layout will break. Notice also, I use 50% instead of 50px.
I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)
I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??
I have this as my CSS:
.wrapper{
margin:0 auto;
width: 80%;
display: table-cell;
}
.gridf{
float:left;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.gridl{
float:left;
margin-left: 3px;
width:200px;
min-height:200px;
border:1px solid white;
}
My HTML:
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Please help :D
Your wrapper is a percentage width container with 4 fixed-width child elements floated.
The width of the wrapper is dependent on the width of the viewport. If the viewport is narrowed to the point that the wrapper's width is less than that of the 4 child element widths together, then naturally they won't all fit and therefore will wrap.
The fix is to make sure your wrapper doesn't get smaller than the combination of the children.
So, add up with widths, borders and margins of the child elements and then give the wrapper a min-width attribute equal to that.
Hi i think you should this check to this demo
.wrapper {
margin: 0 auto;
width: 80%;
border: solid 1px red;
overflow: hidden;
}
.gridf,
.grid,
.gridl {
Background: green;
width: 24%;
min-height: 100px;
float: left;
margin: 2px 0;
}
.gridf {} .grid {
margin: 2px 1%;
}
.gridl {
background: yellow;
}
<div class="wrapper">
<div class="gridf">One</div>
<div class="grid">Two</div>
<div class="grid">Three</div>
<div class="gridl">Four</div>
</div>
Although this is an old post, I think that the problem, which I also run into, is the fact that you want all these cells to be of a fixed size, and not %, right? The solution you chose changed initial format where you specified width:200px;
Well, I would suggest to look here: http://jsfiddle.net/gn2bg/
The ONLY one thing I did is to add inner wrapper around your cells:
.inwrapper{
float:left;
overflow: hidden;
min-width: 830px;
}
and new html as this:
<div class="wrapper">
<div class="inwrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Notice that your wrapper requires 80% of space.
The inwrapper, however, tells that its size is fixed - 830px (total of all internal div sizes plus room for padding.)
This way inwrapper uses 'elbows' to stretch the width, and override these 80% of 'wrapper'
I understand that you already made decision as to what is your best solution. I am leaving this response to anyone else in the future who needs exact answer to your exact question.
You can try removing the table-cell display rule from the wrapper and setting percentages (or min-widths) on the child divs like this jsFiddle example.
That should do the trick :
<div class="wrapper">
<div style="width:850px">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
And that will be supported on any browser.
http://jsfiddle.net/5GrKU/3/
HTML
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
CSS
.wrapper{
margin:0 auto;
width: 80%;
display: inline;
}
.gridf{
float:left;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.gridl{
float:left;
margin-left: 3px;
width:20%;
min-height:200px;
border:1px solid red;
}
for you reference i have also added the URL of the demo. http://jsfiddle.net/sg8FE/
UPDATE
just change display:inline in wrapper class to display:block rest all is right and the div's are centered.
by giving a fixed width in your inner divs you are forcing them to have that width no matter what is the size of the view port. And giving the outer div a width of 80% you are shrinking its size with the width of your view port. You need to do either giving fixed width to all those divs or giving a relative width to all.
How to create two boxes (floating side by side) of same height.
I want to create boxes of height 40% of the container/window?
See the Example Here
If that is what you are looking for, here is more:
CSS:
#parent{
width:205px;
height:200px;
border:1px solid #000000;
overflow:auto;
}
#child1{
height:40%;
background:#00ff00;
float:left;
}
#child2{
height:40%;
background:#0000ff;
float:left;
}
The Important Points:
The float:left is used to align the two boxes side-by-side
The height is specified in % for both child boxes so that they inherit from their parent.
HTML:
<div id="parent">
<div id="child1">
This is first box
</div>
<div id="child2">
This is second box
</div>
</div>
This should be a simple solution for you. Here's my example:
jsfiddle
HTML:
<div class="wrap">
<div class="left">
Content
</div>
<div class="right">
More content
</div>
</div>
CSS:
.wrap
{
width: 400px;
height: 500px;
border: 1px solid #000;
}
.left, .right
{
float: left;
width: 45%;a
height: 40%;
margin: 2%;
}
.left
{
border: 1px solid #f00;
}
.right
{
border: 1px solid #00f;
}
Using a % as height is relative to your parent container's height. Therefore you need to declare the height of your parent container. Take a look at this tutorial: Equal Height Columns.
The question specifically mentions floating, and there have been several good answers for that, but I thought it might be worth posting an answer that doesn't use floats in case the the mention of floating was accidental:
.wrapper {
width: 400px;
height: 400px;
outline: 1px solid #000;
}
.wrapper div {
display: inline-block;
width: 198px;
height: 40%;
background: #66c;
}
.wrapper div:first-child {
background: #6c6;
}
<div class="wrapper">
<div>This is the first box</div>
<div>This is the second box</div>
<p>Some other content</p>
</div>
It doesn't currently work in WebKit, but I assume that's a bug and there'll be a workaround, I am investigating. If you need it to work in IE < 8 add a conditional comment:
<!--[if lt IE 8]>
<style>
.wrapper div { zoom:1; *display:inline;}
</style>
<![endif]-->