I'm creating a series of columns all floated left against eachother. I'd like to make it so that when the columns are larger than their container a horizontal scrollbar appears instead of the columns dropping down. Here's what I have...
<body>
<div id="container">
<div id="col1" class="col">Column One</div>
<div id="col2" class="col">Column Two</div>
...
</div>
</body>
With the css:
body { width: 100%; height: 100%; overflow: auto; }
#container { width: 100%; height: 100%; }
.col { float: left; width: 250px; height: 100%; }
I would ideally like to have the scrollbar on the page/body level since the page is nothing but the columns.
It will work with this CSS :
#container { width: 100%; overflow: auto; white-space: nowrap; }
.col { display: inline-block; width: 250px; }
Caution : display-block not working on IE <= 7
An other solution is to use two containers and fix the width of the second with the sum of columns width :
#container1 { width: 100%; overflow: auto; white-space: nowrap; }
#container2 { width: 1250px; }
.col { float:left; width: 250px; }
<div id="container1">
<div id="container2">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
<div class="col">Column 4</div>
<div class="col">Column 5</div>
...
</div>
</div>
If you want the scrollbar on the body, just remove overflow:auto on #container and #container1
put the width out of container and body. That should resolve the problem.
Related
I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.
You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>
NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
I am using flexboxgrid css library (www.flexboxgrid.com) and I want to achive my first row to be fixed and stays the full width of the container.
I am currently ending up in the first row being fixed but not full width. Here is what I did so far:
HTML:
<div class="Wrapper">
<div class="row center-xs middle-xs fixedHeader">
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
<div class="box">
<h3>Fixed Header</h3>
</div>
</div>
</div>
<div class="row center-xs middle-xs normalContent">
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
<div class="box">
<h3>normal content</h3>
</div>
</div>
</div>
</div>
CSS:
.Wrapper{
max-width: 1520px;
margin: 0 auto;
padding: 80px 40px;
}
.fixedHeader {
background-color: red;
position: fixed;
}
.normalContent{
min-height: 900px;
background-color:green;
}
I have also done a jsFiddle for this. Any idea what am I doing wrong ?
You need to add a width attribute to your "fixedHeader" class. I use the calc css function to make it 100% minus the padding in your "Wrapper" class.
.Wrapper{
max-width: 1520px;
margin: 0 auto;
padding: 80px 40px;
}
.fixedHeader {
background-color: red;
position: fixed;
width: calc(100% - 80px);
}
.normalContent{
min-height: 900px;
background-color:green;
}
See http://caniuse.com/#search=calc for calc() compatibility
You are using position:fixed that's why you are not getting the 100% width.
Add the width as well to your .fixedHeader
.fixedHeader {
background-color: red;
position: fixed;
width: 100%;
}
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I have a table made of divs like this:
<div class="table">
<div class="tRow A">
<div class="tCell">
Test
</div>
</div>
<div class="tRow B">
<div class="tCell">
<!-- content here -->
</div>
</div>
<div class="tRow C">
<div class="tCell">
Test
</div>
</div>
</div>
with the following css:
body, html{
height: 100%;
}
.table{
display: table;
height: 100%;
max-height: 100%;
width: 200px;
table-layout: fixed;
}
.tRow{
display: table-row;
}
.tCell{
display: table-cell;
}
.B {
background: yellow;
}
.B .tCell{
overflow: hidden;
}
.C{
height: 50px;
background: green;
}
http://jsfiddle.net/HtA43/
Now what i need (and i am not able to get this working) is, that the table is rendered 100% height. rowA getting as high as its contents rowC with a fixed height at the bottom. And rowB should fill the rest of the space.
This works so far, but when the content of rowB exceeds its size, the cell and thus the table grows. What i need is that rowB does not grow but the overflow is hidden.
Any suggestions?
On your requisits you have overflow:hidden that makes the layout more easy to acomplish. You can have an structure like this:
<div class="container">
<div class="A">
Test
</div>
<div class="B">
Test....
</div>
<div class="C">
Test
</div>
</div>
And then just a few styles:
.container{
height: 100%;
width: 200px;
position:relative;
overflow:hidden;
}
.B {
min-height:100%;
}
.C{
position:absolute;
bottom:0;
width:100%;
height: 50px;
}
Check this Demo Fiddle
I am trying to create a header with 3 divs: one is aligned left, one is aligned right and the other is in the center.
the page is for example 1200px
the black,red and yellow rectangles are 960px and centered in the page.
elements in the black rectangle are added to the left,
elements in the yellwo rectangle are added to the right,
and the elements in the red tectangle are centered.
This is a good general case study for header of a site
This will solve your issue
<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
<div style='float:left;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
<div style="margin:10px auto;text-align:center">Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
I wrote an article on this a while back here is my code...
<div id="mainContent">
<div id="col1">
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="col3">
Column 3
</div>
<div id="clearance" style="clear:both;"></div>
</div>
And here is the CSS for it....
#mainContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#col1 {
margin: 10px;
float: left;
width: 300px;
}
#col2 {
margin: 10px;
float: left;
width: 300px;
}
#col3 {
margin: 10px;
float: left;
width: 300px;
}
Hope this helps... Phillip Dews
Try this..
<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>
<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>