I have a 1100px-width div general container which I'd call (A) that resizes to 925px in my aplication. In addition, I have a div which has to more divs inside: one has a static width (200px) which I'd call (B) and the other doesn't but has an horizontal scrollbar which I'd call (C).
I want when general container resizes (A) , the div (C) resizes,too and keep its scroll bar.
I have came up with this jsfiddle so far but I can't figure it out what I am doing wrong.
Pd: I have used different metrics for simulation.
¿How can I make the div child(C) resizes with general container(A) width?
.
Its latest update
fiddle
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container{
height:100px;
}
.left{
width:100px;
height:100px;
background-color:green;
float: left;
}
.right{
overflow-x:auto;
background-color:red;
width: 100%;
min-height: 100px;
}
.content{
width:600px;
position :relative;
}
.wrap{
overflow: hidden;
padding-left: 10px;
}
<div class="container">
<div class="left">
</div>
<div class="wrap">
<div class="right">
<div class="content">
CONTENT
</div>
</div>
</div>
</div>
(C) should not resize, but have a certain width (more than 900px, to get the scrollbar.). The container (A) does the resizing and should have min-width:925px
update:
it turned out to be a bit more complex:
http://jsfiddle.net/p7perzc6/
.a {
border: 1px solid #aaa;
width : 800px;
height: 200px;
}
.b {
width: 100px;
background-color: green;
height: 200px;
float: left;
}
.c {
background-color: orange;
height: 200px;
margin-left: 101px;
float: left;
overflow-x: scroll;
width: 900px;
position: fixed;
}
Related
I would like to set the 2-columns divs with the same height than container (without using px of course)
HTML
<body>
<div id="container">
<div id="hdr-lay">
Header
</div>
<div id="left-column">
Grid Layout left
</div>
<div id="right-column">
Grid Layout right
</div>
</div>
</body>
CSS
#hdr-lay {
_background-color: red;
}
#container {
background-color: gray;
height:100%;
width:100%;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
}
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
}
http://jsfiddle.net/g3gxv4j2/
Perhaps it would be easier to do itwith no ?
I would like to set the 2-columns divs with the same height than
container
Since your container have height:100%, I assume you want the same for your child div's
Give 100% height to your html and body
html,body{
height:100%
}
You've set height:100% for your container. This will only extend its height to 100% of its content(which themselves are not getting 100% height). Let your left and right columns inherit height from their parent container.
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
height:inherit;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
height:inherit;
}
Here's the fiddle
Cheers!
This might be better :
#container {
display:flex;
flex-direction:row;
}
#left-column {
width: 30%;
background-color: blue;
}
#right-column {
background-color: red;
width: 70 %;
}
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
I'm having an issue using display: table and display: table-cell.
Fiddley: http://jsfiddle.net/5q51sbqb/1/
I have a div with a display:table; and within that two divs with display:table-cell;
The left div (.t1) is a fixed width and the right div(.t2) should take up the rest of the space to the edge of the container.
My issues lies with adding a long div (2000px) to the right div(.t2). I basically need the content-window to stay the same width as its parent without pushing out further than the confines of the container, as to allow the content within to be scrolled.
Keep in mind this needs to be without using a fixed width, as the container and t2 are both responsive. And I also have to use table and table-cell display properties :(
So basically the children of the .t2 div are flowing beyond the container when I need them to fit within the container width ( without setting a fixed width on the content-window ... and on the .t2 div)
I'm stumped.
HTML
</div>
</div>
<div class="table-cell t2">
<div id="content-window">
<div id="content"></div>
</div>
</div>
</div>
</div>
CSS
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table{
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1{
width: 100px;
background-color: red;
}
.t2{
width:auto;
background-color: blue;
}
#content-window{
width:100%;
overflow:scroll;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Since you smartly created a #content-window, set it to be a position: absolute; so it won't mess up the cell's auto width. Just remember to set the .t2 to be a position: relative, so the #content-window might fill it in width and height, using the contained space of the right table cell.
tip: Use overflow-x if you want it to scroll only horizontally.
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table {
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1 {
width: 100px;
background-color: red;
}
.t2 {
position: relative;
background-color: blue;
}
#content-window{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
overflow-x: scroll;
height:50px;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Check it here: http://jsfiddle.net/5q51sbqb/4/
I'm creating a site where the basic design consists of a few blocks on top of each other, something like this:
The first three divs are of set height and width, and the main area is also of a fixed width, with the whole thing centered horizontally on the screen. I want the main area to extend to the bottom of the screen, whatever the screen size and proportions, and to use a scroll bar within it if the contents extends beyond the bottom of the screen.
The problem I have found is that to use a scroll bar it seems you need an absolute height, so I haven't been able to find any method for fitting it and being able to scroll through the contents at the same time.
Any ideas?
Here's one way of doing this. I know there might be too many divs that are just for the look of the page, making it not 100% semantic. Anyway, here you go:
http://jsfiddle.net/vSt3Z/
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="content">
<div class="inner">
<div class="scroller">
Content
</div>
</div>
</div>
And the CSS:
.one, .two, .three {
height: 40px;
margin: 0;
padding: 0;
}
.content {
background: yellowgreen;
position: absolute;
top: 0;
left: 0;
z-index: -1;
padding-top: 120px;
width: 100%;
height: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.content .inner {
height: 100%;
overflow-y: scroll;
}
.content .inner .scroller {
height: 1200px;
}
Please ignore this:
* {
margin: 0;
padding: 0;
}
it's there just to remove an annoying default padding from jsfiddle
Use calc with min-height:
HTML:
<div class="first block"></div>
<div class="second block"></div>
<div class="third block"></div>
<div class="main"></div>
CSS:
html,body{
height:100%;
width:100%;
padding:0;
margin:0;
}
.block{
width:100%;
height:100px;
}
.first{
background:red;
}
.second{
background:blue;
}
.third{
background:yellow;
}
.main{
min-height: calc(100% - 300px);
width:100%;
background:green;
}
JSFiddle
caniuse calc
In my opinion this is the simplest method:
DEMO: http://jsfiddle.net/ZPU5Z/
This does not put a scroll bar on the main #content section only but on the whole document. Unless you have a really compelling reason to do otherwise I suggest keeping things simple (and therefore highly compatible too!).
HTML
<div id="fixed-header">
<div id="header">Header</div>
<div id="bar1">Bar 1</div>
<div id="bar2">Bar 2</div>
</div>
<div id="content">
Main area
</div>
CSS
* {
margin: 0;
padding: 0;
border: 0;
color: white;
}
body {
background-color: blue;
}
#fixed-header {
position: fixed;
top: 0;
width: 100%;
}
#header {
background-color: black;
text-transform: uppercase;
height: 50px;
}
#bar1 {
height: 25px;
background-color: red;
}
#bar2 {
height: 25px;
background-color: green;
}
#content {
padding-top: 100px; /* header + bar1 + bar2 */
}
I'm making a simple blog theme and I want to have a little box displaying the post date on left off-set of each post like so: http://s21.postimg.org/fjygwqw1z/timestamp_Mockup.png
However, the post's container has an overflow-y set to scroll and attaching the timestamp div to each post won't show as it's hidden by the overflow. I can get around this if I set the timestamp div to position: absolute but then it doesn't stay in-line with the post and instead stays fixed in one place.
Here's a simple example: http://jsfiddle.net/MeVwt/
<style>
#leftCol{
width: 100px;
height: 500px;
background: green;
float: left;
}
#rightCol{
width: 400px;
height: 500px;
background: orange;
overflow-y: scroll;
float: left;
}
.content{
height: 700px;
width: 100%;
background: red;
}
.box{
width: 100px;
height: 100px;
background: purple;
margin-left: -50px;
}
</style>
<div id="leftCol">
</div>
<div id="rightCol">
<div class="content">
<div class="box"></div>
Fish
</div>
</div>
What I'm trying to do is make the purple box (.box) show outside its container (.content) and appear in the green area without setting it to a fixed position so it still scrolls with the content.
If you overlap the #leftCol with the #rightCol (by positioning them absolute to left:0; of their parent container), set the left margin to the width of the left column, then set .content position to relative and box position to absolute, and adjust the positioning using left.
Here is the updated CSS:
#leftCol{
position:absolute;
width: 100px;
height: 500px;
background: green;
left:0;
}
#rightCol{
position:absolute;
padding-left:100px;
width: 400px;
height: 500px;
overflow-y: scroll;
left:0;
}
.content{
height: 700px;
width: 100%;
background: red;
position:relative;
}
.box{
width: 100px;
height: 100px;
background: purple;
position:absolute;
left:-100px;
}
and a DEMO
Hope this helps =)
You could just create another div around the actual content and then float it next to the box.
Like this http://jsfiddle.net/MeVwt/3/
Downside with this is that you have to specify the width of the content for it to fill out all the width.
<div id="rightCol">
<div class="content">
<div class="box"></div>
<div class="content_text">
Fish
</div>
</div>
</div>
Css:
.content_text{
height: 700px;
background: red;
width: 335px;
float:left;
}
.box{
width: 100px;
height: 100px;
background: purple;
margin-left: -50px;
float:left;
}
html {
overflow-x: hidden; }
body {
overflow-x: hidden; }