I have a HTML like this:
<div class="container">
<div class="banner"></div>
<div class="left"></div>
<div class="right">
<div class="content"></div>
</div>
</div>
These divs are auto resize base on its content with overflow: auto. Now I'm facing a problem. When div:content overflow its parent, div: right and div: container will resize to fit with div:content height. But div: left height stay unchange. How to make div: left height auto resize to fit div: container when its height change?
Here a jsfiddle: http://jsfiddle.net/trongcuong1710/cDqSj/2/
You can try this:
.left {
width: 200px;
overflow: auto;
background-color: blue;
position:absolute;
top:140px;
left:0;
bottom:0;
}
.right {
width: 300px;
min-height: 260px;
overflow: auto;
background-color: green;
margin-left:200px;
}
demonstration
Hope I understood the question corectly - now works fine, if you try changing content height.
Related
How do I get a wrapper div that is 100% height to expand its with the height of its children? That are also 100% in height.
The setup looks like this:
<div id="wrapper" style="height:100%">
<div class="child" style="height:100%">div1</div>
<div class="child" style="height:100%">div2</div>
</div>
But the wrapper dosen't expand to 200% height. I have tried making the wrapper min-height:100%; but then the children don't inherit the full height, only the height of their own content.
https://jsfiddle.net/on78pof8/
(The aqua colored box, dosen't expand)
Please tell me if I didn't understand the question correctly.
I think you have forgotten to add width:100%; to the child divs.
To remove the extra scroll bar on the html/body, you can remove the default margin/padding of html and body by using this declaration:
html,body{
margin:0;
padding:0;
}
Here is what I believe you have in mind:
html,
body {
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: aqua;
height: 100%;
overflow: auto;
}
.child {
height: 100%;
width: 100%;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
Set height in viewport units on the child divs
.child {
height:100vh;
}
Demo (with viewport units)
(NB: The OP is actually interested in background image on the wrapper instead of the solid aqua color)
html,
body {
height: 100%;
}
#wrapper {
background: aqua;
}
.child {
height: 100vh;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
If you don't want to use viewport units (which by the way - as #CoadToad pointed out in the comments - has very good support) - then I think you'll have to use javascript.
Demo (with javascript)
If you want a dynamic number for the height of the child divs, depending on your needs, you can set these from the view-port height (vw) but this assumes you want them each to be the full height of the entire document.
You need to set overflow-y: auto on the parent for this to work. Here:
html,body {
height:100%;
margin: 0;
}
#wrapper {
background:aqua;
height:100%;
overflow-y: auto;
}
.child {
height:100%;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
I have a div container in my html page and i want set its height to expand all remaining page in the screen..
How can i do that ??
That's my code :
HTML
<div class="row">
<div id="builder-container" class="col-xs-12 col-lg-9">
<div id="builder-content" > </div>
</div>
</div>
CSS
#builder-container {
background-color: #ccc;
height: 100%;
}
You have to give all of the parent elements, including the div you want to extend, a height of 100%.
Actually it would not get cover your whole page without enough content, but the best way is to give it 'position:absolute/fixed/relative' and give the same div top:whateveryouwant px; and bottom: 0px/0%; width and height :100%
JSFiddle - Edited: Check it now
CSS
body
{
margin:0;
width:100%;
height:100%;
}
#builder-container {
display:block;
position:absolute;
margin-top:5%;
left:0%;
bottom:0%;
background-color: #ccc;
height: 100%;
width:100%;
}
html
<div class="row full_height">
<h1>Test elem</h1>
</div>
css
.full_height {
height: 100vh
}
I am trying to make a series of DIV elements sit side by side. Howeever i am running into problems
HTML:
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
CSS:
#comic{
height: 563px;
width: 1000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
.comic_panel{
width:1000px;
height:563px;
position:relative;
float:left;
background:orange;
}
However the result I get is simply the DIVS displaying under neath one another.
Your divs are too wide to fit side by side in the container. Try giving them a width of 200px:
.comic_panel{
width:200px;
height:563px;
position:relative;
float:left;
background:orange;
}
If you want for a scroll bar to appear, use white-space:nowrap; on the container and display:inline-block on the children.
Here is a demonstration: http://jsfiddle.net/h2StP/show
Change the CSS to below,
.comic_panel{
width:6%;
height:563px;
position:relative;
float:left;
background:orange;
border:1px solid red;
}
and they should fall side by side.
Basically child divs have same width as parent , so there is no room for them to sit side by side.
DEMO
The reason is that each inner divs (.comic_panel) are using all the width of the parent container (#comic). Then, the next div can only be place right below the previous one.
If you tune up the widths, you can have your result.
For example, if you let the container div have any width, you would have all the inner divs side by side: http://jsfiddle.net/
body {
width: auto;
overflow: auto;
width: 10000px;
}
#comic{
height: 563px;
background: black;
margin: auto;
color:white;
overflow: visible;
}
.comic_panel{
border: 1px solid black;
width:100px;
height:63px;
float:left;
background:orange;
}
To make the inner divs not wrap, you need to either set the width of the body element to a proper value (to make space for all the inner divs) via a hard-coded width css property (as in the fiddle, but not the best approach) or via javascript (a better approach).
This post explains other approaches, using tables: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/.
BTW, you may not need the position: relative that you put there to achieve this effect.
Put the whole thing into a container div like this:
<div id="container">
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
</div>
The container div should be the same size as your 'comic' div was before:
#container {
height: 563px;
width: 1000px;
overflow: auto;
}
And the width of your 'comic' div should be 14000.
#comic{
height: 563px;
width: 14000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
I want to know how do you guys make the header-side-main-footer layout in html.
Like this:
<html>
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</html>
The div.header and the div.footer have a fixed height. And the div.content will hold all the rest height,no scroll bar for the body.
And the div.side will have a fixed width,and the div.main will hold all the rest width.
The div.side can have y-scroll bar.
When the window resize,the div.content will expand to fix the height,no scroll bar.
BTW,sometimes the div.side and the div.main may exchange the position like this:
<html>
<div class="header"></div>
<div class="content">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="footer"></div>
</html>
How to you make it?
update:
div.main can not made as overflow:hidden,since it is the container which I use for ceate the map.
var map=new google.maps.Map('main',{});
Gave div.side a height and width and then overflow:scroll
Like:
div.side{
height:60%;
width: 60%;
overflow: scroll;
}
and div.content overflow:hidden
That is how I would do it in html, well I would add a wrapper around it to make centering easy, but that is just me. I think you want to know about the css, and to be hones, there are going to be many ways one might go about that, the simples being:
.header {
width:whateverpx;
margin:0 auto;
}
.content {
width:100%;
position:relative;
}
.content:after {
clear:both;
content:"";
display:none;
}
.side {
float:left;
position:relative;
width: your width for it;
}
.main {
float:left;
position:relative;
}
.footer {
height: whateverpx;
width: whateverpx;
margin:0 auto;
}
and, if you want the content centered add a wrapper around it and add
.wrapper {
width:whatever;
marging:0 auto;
}
or
no wrapper, do this for .content instead
.content {
width: whatever
margin:0 auto;
position:relative;
}
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.