I have a problem, i want to set 3 floated divs and on the bottom I would like to have a footer. So I got these two solutions, but it does not work. Please check out the image:
Here the problem is that the content is not not cleared, so the footer does not change position:
<div class="container">
<div class="left"><div class="content"><div class="right">
<div style="clear:left;"></div>
</div>
<div class="footer"></div>
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
}
.center {
float: left;
width: 80%;
max-width: 500px;
}
.right {
width: auto;
}
.content {
height: auto !important;
height: 100%;
min-height: 100%;
}
.footer {
height: 202px;
margin: -202px auto 0;
position: relative;
}
If i clear the content, I get the result that the right div goes to the next line:
thanks!
I played around a little bit. I think your html structure wasn't right for the effect you were trying to create.
Here is a new example:
HTML
<div class="container">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
<div style="clear">
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
min-height: 100px;
background: red;
}
.center {
float: left;
width: 80%;
max-width: 500px;
min-height: 100px;
background: blue;
}
.right {
width: auto;
min-height: 100px;
background: green;
}
.content {
height: auto !important;
height: 100%;
min-height: 100px;
width: 80%;
max-width: 500px;
margin: 0 auto;
background: yellow;
}
.footer {
height: 202px;
margin: 0 auto;
position: relative;
background: purple;
}
I rearanged everything in this fiddle:
http://jsfiddle.net/LJQCx/2/
I hope this is what you trying to achiev.
Here is the code hope it will help check the fiddle
<div class="page-wrap">
<div class="container">
<div class="left">
<p>I am Left</p>
</div>
<div class="center">
<p>I am Center</p>
</div>
<div class="right">
<p>I am Right</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>I am Footer</p>
</div>
* { margin: 0;}
html, body { height: 100%;}
.page-wrap {min-height: 100%;/* equal to footer height */margin-bottom: -142px; }
.page-wrap:after { content: ""; display: block;}
.footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px;}
.site-footer {}
.container{ width:100%;}
.left{ float:left; width:25%;}
.center{float:left; width:50%;}
.right{float:left; width:25%;}
Related
I can't seem to have a horizontally-scrolling div inside a flex column.
Codepen
.container { display: flex; margin: 20px; height: 300px; border: 1px solid blue; }
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { padding: 20px; }
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<div class='side-nav'>
</div>
<div class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</div>
</div>
If I change the max-width of .scrollable to px it would work, but I need it to fill the column.
What am I missing?
In my opinion, this is a Module"bug" (Wierd).
Anyway, one very simple solution is to use flex-basis (Instead of width).
Step 1 for main add width: 0;
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
Step 2 - main add flex-basis: 100%;
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
flex-basis: 100%;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
One more option is to use width: 0; & flex-grow:1
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
flex-grow: 1;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
I don't like any of those ideas - but this is life hh.
Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?
I have two divs that I want to float on the same line. I don't want the right one to wrap until the window gets around 250px wide.
I am setting the initial widths of the divs to percentages and this seems to be causing issues. The right div will wrap to a new line well before it shrinks to a min-width of 100px;
<div id="#container">
<div id="left">
<div id="box"></div>
</div>
<div id="right">
<h1>Hello World</h1>
</div>
</div>
#container {
display: table;
width: 100%;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
float: left;
width: 23.6%;
min-width:150px;
background: gold;
text-align: center;
}
#right {
float: left;
width: 76.4%;
min-width:100px;
background: pink;
}
http://jsfiddle.net/5C6GB/
Removing the width on the right div partially solved the problem.
But it looks like I had to resort to using display:table*
http://jsfiddle.net/5C6GB/3/
<div id="container">
<div class="tr">
<div id="left" class="td">
<div id="box"></div>
</div>
<div id="right" class="td">
<!-- <h1>Hello World</h1> -->
</div>
</div>
</div>
#container {
display: table;
width: 100%;
background: red;
height: 100px;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
width: 25%;
min-width:150px;
background: gold;
text-align: center;
height: 100%;
}
#right {
min-width:100px;
background: pink;
width: 75%;
vertical-align: bottom;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
#media only screen and (max-width: 600px) {
#left, #right {
display:block;
width: 100%;
min-height: 100px;
}
.tr {
display: block;
}
#container {
display: block;
}
}
It's the min-width:150px; in the left div which is causing the right div to wrap to a new line well before it shrinks to a min-width of 100px;
#left {
float: left;
width: 23.6%;
min-width:150px; /*remove or change this to a smaller amount */
background: gold;
text-align: center;
}
FIDDLE
I have a wrapper div that holds a header, navbar, and a content div. when the content expands I want the wrapper div to expand with it however it currently doesn't do this. In other word I want the edges of the content to remain in the wrapper div. Once the content div expand beyond the height of the screen I need the scrollbar to appear on edge of the edge of the edge of the window.
my css:
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow-y: auto;
}
body {
background-image: url(../Images/background1.jpg);
background-size: cover;
min-width:1000px;
background-repeat: no-repeat;
}
#wrapper1
{
height: 100%;
width: 94%;
margin-left: auto;
margin-right: auto;
background-color: #006699;
position: relative;
overflow: hidden;
}
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#header, #nav, #content
{
width: 94%;
margin-left: auto;
margin-right: auto;
}
#header
{
height: 15%;
background-color: Red;
}
#nav
{
height: 2%;
min-height: 35px;
background-color: Yellow;
}
#content
{
height: 100%;
background-color: brown;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
</body>
http://jsfiddle.net/VB3PM/
Try this:
<style type="text/css">
html,
body
{
height:100%;
}
#wrapper
{
position:relative;
min-height:100%;
}
</style>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
Change the overflow CSS property of #wrapper from hidden to auto as shown below
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: auto;
}
This question already has answers here:
css background color with floating elements
(5 answers)
Closed 6 years ago.
I have an issue with my floated child divs not growing with my parent div. Is there a way to fix this? I need the wrapper to be 100% of the content in either div. Here is the html;
<body>
<div id="wrapper">
<div id="leftpane">
<div id="lefthead">
<div id="leftheadfiller">
</div>
<div id="leftheadlogo">
</div>
<div id="leftheaddivider">
</div>
</div>
<div id="leftcontent">
</div>
</div>
<div id="rightpane">
<div id="righthead">
<div id="rightheadfiller">
</div>
<div id="rightheadlogo">
</div>
<div id="rightheaddivider">
</div>
</div>
<div id="navigation">
Properties Careers About Blog Advertise Contact
</div>
<div id="rightcontent">
</div>
</div>
<div id="close">
</div>
</div>
</body>
And here is the css;
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
background-color: aqua;
height: 100%;
width: 866px;
margin-left: auto;
margin-right: auto;
}
#leftpane {
background-image: url('images/darkbackground.gif');
width: 326px;
height: 100%;
float: left;
}
#lefthead {
height: 132px;
width: 100%;
}
#leftheadfiller {
height: 75px;
width: 100%;
}
#leftheadlogo {
background-image: url('images/index_07.gif');
width: 71px;
height: 56px;
float: right;
}
#leftheaddivider {
height: 1px;
width: 100%;
background-image: url('images/lightbackground.gif');
float: right;
}
#lefttcontent {
height: 100%;
background-color: fuchsia;
}
#rightpane {
background-image: url('images/lightbackground.gif');
width: 540px;
height: 100%;
float: right;
}
#righthead {
height: 132px;
width: 100%;
}
#rightheadfiller {
height: 75px;
width: 100%;
}
#rightheadlogo {
background-image:url('images/index_09.gif');
width: 109px;
height: 56px;
float: right;
}
#rightheaddivider {
height: 1px;
width: 100%;
background-image: url('images/darkbackground.gif');
float: right;
}
#navigation {
margin-top: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #A3A3A3;
font-size: 14px;
word-spacing: 44px;
text-align: center;
width: 100%;
height: 18px;
}
#rightcontent {
padding-left: 6px;
background-color: fuchsia;
}
#close {
clear: both;
}
Is there a way to fix this? I have this set up on a temporary folder on my local server at:
http://68.113.27.229/test
The two divs that I need to force the wrapper to grow are Leftcontent and Rightcontent.
Thanks!
Add overflow: hidden to the parent div element.
If you don't want the overflowing content to be hidden, then try this:
Insert this as the last div inside the wrapper div.
<div style="clear: both"></div>