Suppose I have an Outer Div with a size:1200px, and within this div that I wanted to have an Inner Div that is wider, just for the purpose of fitting more horizontal stuff into a window.
As of right now the following CSS is not achieving this. Any tips appreciated.
.OuterDiv {
width: 1200px;
}
.InnerDiv {
width: 1400px;
}
<div class="OuterDiv">
<div class="InnerDiv"></div>
</div>
Try this. I added height and background so you could see the boxes.
The key is overflow: auto
.OuterDiv {
width: 200px;
height: 140px;
background: blue;
overflow: auto;
}
.InnerDiv {
width: 1400px;
height: 90%;
background: orange;
}
<div class="OuterDiv">
<div class="InnerDiv"></div>
</div>
You're just not vizualising, but to add, try adding the overflow property and some colors:
.OuterDiv {
width: 1200px;
height: 500px;
background-color: #f00;
overflow: scroll;
}
.InnerDiv {
width: 1400px;
height: 500px;
background-color: #0f0;
}
Related
Hello budding web enthusiasts. I am afraid that I am in quite a pickle and need a helping hand.
In a current web project, I ran into a sour wall. This here is the code. Take a gander. From the code, it does exactly what I want. But here is the problem.
There are scrollbars on the div. I dont want any scrollbars on my divs. I tried overflow-y:scroll; and got rid of the horizontal scrollbar but the vertical scrollbar is still there. I tried a lot and searched for it but to no avail.
How can I get rid of both the vertical and horizontal scrollbars in my divs with it still bieng able to scroll.
edit : I also need it to be cross browser functional. not only chrome.
HTML
<div id="content">
<div id="left">
<div class="richyPhoto"> </div>
</div>
<div id="right">
</div>
</div>
CSS
body {
overflow:hidden;
}
#content, html, body {
height: 100%;
width:100%;
margin:0;
padding:0;
}
#left {
float: left;
width: 50%;
background: red;
height: 100%;
overflow: scroll;
}
#right {
float: left;
width: 50%;
background: blue;
height: 100%;
overflow: scroll;
}
I would use this technique:
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow: auto;
padding-right: 15px; /* Increase this value for cross-browser compatibility */
}
Here's a working Fiddle: http://jsfiddle.net/5GCsJ/954/
Here is a way to do it:
HTML
<div id="content">
<div id="left">
<div class="richyPhoto"> </div>
</div>
<div id="right">
<div class="richyPhoto2"> </div>
</div>
</div>
CSS
body {
overflow:hidden;
}
#content, html, body {
height: 100%;
width:100%;
margin:0;
padding:0;
}
#left {
float: left;
width: 50%;
background: red;
height: 100%;
overflow: hidden;
}
.richyPhoto {
width: 100%;
height: 99%;
border: 1px solid red;
overflow: auto;
padding-right: 15px;
}
#right {
float: left;
width: 50%;
background: blue;
height: 100%;
overflow: hidden;
}
.richyPhoto2 {
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
Working Fiddle link: No scrollbars scroll
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 trying to scroll items within a container without known height. I have div itemsHolder which fills up the rest of wrapper container. wrapper container can have any height but contains header container which has fixed height. So I don't know the height of itemsHolder and I need div items to be scrollable. Here's the code I tried but was unsuccessful.
To sum up. There's wrapper container containing header and itemsHolder. wrapper has variable height, header has fixed height and itemsHolder fills the rest of wrapper (wrapper.height - header.height = itemsHolder.height). I need div items to be scrollable within itemsHolder without using JS.
Thanks.
<div class="wrapper">
<div class="header">
title
</div>
<div class="itemsHolder">
<div class="items">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
CSS:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
overflow: scroll;
}
.item {
width: 100px;
height: 80px;
float: left;
}
http://jsfiddle.net/B2XUL/
Update: I don't know the size of wrapper, it may be different each time and therefore I don't know the height of itemsHolder so I can't set it fixed.
Do the following:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
}
.itemsHolder {
height: 100%;
overflow: auto;
overflow-x:hidden;
background: #ccc;
}
Demo
Set the height of itemsHolder and it will add the scroll if necessary
.itemsHolder {
overflow: scroll;
height: 150px;
}
http://jsfiddle.net/B2XUL/4/
EDIT: I'm very sorry I can't provide an explanation as to why, but adding bottom padding to .wrapper and setting the height of .itemsHolder seems to work. You may have to reduce size of wrapper by 35px when it is set.
Any explanation for this or even a better fix would be welcomed.
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
padding-bottom: 35px;
}
.itemsHolder {
overflow: scroll;
height: 100%;
}
(also .items seems redundant?)
see updated fiddle
Using calc() CSS property, you can achieve wrapper.height - header.height = itemsHolder.height
.itemsHolder {
overflow: auto;
height:calc(100% - 50px);
}
Add overflow auto:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 20%;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
height: 80%;
overflow: auto;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}
Add overflow-x: hidden if you only want vertical scroll.
Updated Fiddle
js fiddle demo
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}
Hi I search for reason why my inner divs don´t have 100% height. i check a lot o threads here and on internet, but nothing work. I need website which have content with same width and height as browser content = for that I need all divs with height of browser height. I search for CSS only solution (= no CCS3, no Javascript/Jquery, etc..).
<div class="obsah">
<div class="obsah_in_1_3">
obsah1
</div>
<div class="obsah_in_2_3">
obsah2
</div>
<div class="obsah_in_3_3">
obsah3
</div>
</div>
html, body{
height: 100%;
}
.menu{
position: relative;
float: left;
width: 260px;
height: 100%;
min-height: 100%;
height:auto !important;
background-color: green;
}
.obsah_in_1_3 {
float: left;
width: 33%;
background-color: #FF0000;
height: 100%;
min-height: 100%;
height:auto !important;
}
.obsah_in_2_3 {
float: left;
width: 33%;
background-color: #00FF00;
height: 100%;
min-height: 100%;
height:auto !important;
}
.obsah_in_3_3 {
float: left;
width: 34%;
background-color: #0000FF;
height: 100%;
min-height: 100%;
height:auto !important;
}
.obsah{
position: relative;
display: block;
height: 100%;
min-height: 100%;
height:auto !important;
overflow-x: hidden;
overflow-y: scroll;
background-color: blue;
}
Here is Jsfiddle
I try used absolute position with bottom: 0px; to inner divs (obsah_in_1_3, obsah_in_2_3, obsah_in_3_3) and this work, but I need have floating divs, because after solved this problem I need change their width with Jquery nd they need float together.
=> simply I don´t know why inner divs (obsah_in_1_3, obsah_in_2_3, obsah_in_3_3) not work and div "menu" work and these divs are same.
Not any large reason you are use two times height property with different value that's why not work,
Check this Demo jsFiddle
position: relative; another display: block; and third height: 100%; this three properties are great roll to archive 100% height.
CSS
html, body{
height: 100%;
}
.hlavicka{
position: relative;
float: left;
width: 260px;
height:100%;
background-color: grey;
}
.obsah_in_1_3 {
float: left;
width: 33%;
background-color: #FF0000;
height: 100%;
}
.obsah_in_2_3 {
float: left;
width: 33%;
background-color: #00FF00;
height: 100%;
}
.obsah_in_3_3 {
float: left;
width: 34%;
background-color: #0000FF;
height: 100%;
}
.obsah{
position: relative;
display: block;
height: 100%;
float: left;
width: 50%;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: blue;
}
Hope now this help you!
Height 100% means you can add the content in div & the height changes according to div. You can set height in pixels or you can get the Window resolution and set the height of the div according.
Take out height:auto !important from your parent and child divs. Height 100% should do what you need.
I looked through many posts and still can't get this one to work...
My goal is to style css only (no javascript) so that the height of DIV class "two" always fit into the DIV class "container".
The container DIV's height could change like window resize that is why I would like my "two" DIV to be able to change the size accordingly. So I set the container DIV height to 300px here but it could be any px like 500px etc
Please let me know if you need more clarification. Thanks in advance!
http://jsfiddle.net/pn9Qa/
HTML
<div class='container'>
<div class='top'>some text</div>
<div class='bottom'>
<div class='one'>header</div>
<div class='two'>items here</div>
</div>
</div>
CSS
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
}
.top
{
height: 60px;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
Here's one using calc():
width: -webkit-calc(100% - 60px); /* note, the space is necessary */
Here's one using display: flex
display: -webkit-flex;
-webkit-flex-direction: column;
Here's one using padding/margins and z-index:
box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;
Then, the old, do some math yourself version.
Brevity on prefixes used. Use http://caniuse.com/ if you need to see which ones are necessary.
Add "overflow: hidden;" to the .container rule, like this: http://jsfiddle.net/pn9Qa/2/
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
overflow: hidden;
}
Do you need this: http://jsfiddle.net/pn9Qa/1/
html, body { height: 100%; }
.container
{
height: 100%;
width: 100%;
border: 3px solid red;
}
.top
{
height: 100%;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}