I've moved onto using divs rather than tables.
I have a container with a repeat image as a background. It needs to auto size due to my dynamic content.
The issue I'm having is I want to put two divs in this container side by side.
When I float these divs this causes my auto container div to not expand with them. The only way I can solve the issue is by setting the container to a height which I can't do as this will be different on each dynamic page.
http://www.blockdesigns.co.uk/html5.php this is my example.
Code:
<body>
<div id="main_wrapper">
<header id="top_header">
</header>
<div id="main_body">This part should go all the way down to the footer.<br>
<div id="leftside">Float left div here</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
CSS
#main_wrapper{
width:1000px;
margin: 20px auto;
text-align:left;
}
#main_body{
background:url(Body1000.jpg);
background-repeat:repeat;
text-align:center;
width:1000px;
}
#leftside{
float:left;
width:200px;
height:300px;
margin:10px;
}
Add overflow: hidden; to main_body
example
#main_wrapper {
width: 1000px;
margin: 20px auto;
text-align: left;
}
#main_body {
background: url(Body1000.jpg);
background-repeat: repeat;
text-align: center;
width: 1000px;
overflow: hidden;
}
#leftside {
float: left;
width: 200px;
height: 300px;
margin: 10px;
}
Related
I can't figure out this basic problem. I basically am trying to place the purple div next to the yellow div. these 2 divs are wrapped in the white div, and the white div is wrapped in the blue div.
If I float the yellow and purple divs left, the white div changes its fixed width from 960px to 100%, and the blue div cannot be seen.
How can this be fixed? I've tried clear:both but to no avail.
/* Footer */
#footer-wrap{
width:auto;
height:auto;
background:#039;
}
#footer-content-wrap{
width:960px;
height:auto;
background:#EDF5F7;
margin:0 auto;
}
#footer-left{
width:500px;
height:200px;
background:#CC3;
}
#footer-right{
width:460px;
height:200px;
background:#96F;
}
<!-- Footer -->
<div id="footer-wrap">
<div id="footer-content-wrap">
<div id="footer-left"></div>
<div id="footer-right"></div>
</div>
</div>
</body>
</html>
You just need to add the overflow: auto; to both containers and then float your elements, the issue is that when you float the objects the containers will loose the height, you can read more here: why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t. Here is a fiddle with your code and the overflow's fixed, I added an extra padding to the containers so you can check the results, if you remove the padding's it will still look like they dissapeared, I also made the white div to red to be more obvious the results.
When you float your footer-left and footer-right divs, the white div takes 100% width as its 960px equals the sum of the footers.
If I float the yellow and purple divs left, the white div changes its
fixed width from 960px to 100%, and the blue div cannot be seen.
The blue div is cannot be seen because you are not clearing the floats - clear it with overflow: hidden on the footer-content-wrap.
See demo below:
/* Footer */
#footer-wrap {
width: auto;
height: auto;
background: #039;
}
#footer-content-wrap {
width: 960px;
height: auto;
background: #EDF5F7;
margin: 0 auto;
overflow: hidden;
}
#footer-left {
float: left;
width: 500px;
height: 200px;
background: #CC3;
}
#footer-right {
float: left;
width: 460px;
height: 200px;
background: #96F;
}
<div id="footer-wrap">
<div id="footer-content-wrap">
<div id="footer-left"></div>
<div id="footer-right"></div>
</div>
</div>
You can add a float:left property to your divs.
See this pen.
CSS :
#footer-wrap {
width: auto;
height: auto;
background: #039;
}
#footer-content-wrap {
width: 960px;
height: auto;
background: #EDF5F7;
margin: 0 auto;
}
#footer-left {
width: 500px;
height: 200px;
background: #CC3;
float: left;
}
#footer-right {
width: 460px;
height: 200px;
background: #96F;
float: left;
}
HTML :
<div id="footer-wrap">
<div id="footer-content-wrap">
<div id="footer-left"></div>
<div id="footer-right"></div>
</div>
</div>
I have a 3 column layout which I'm creating using inline-block divs. The left and right columns are fixed widths but the inner column is to hold dynamic content and should expand horizontally as required by it's content width.
That's easy enough... the tricky part is that when the browser window is smaller (horizontally) than the width of the left, right and expanded middle divs, I would like the middle div to scroll and the side columns to stay fixed. In other words, the middle div's size should shrink and grow with window resize but should not grow beyond the available space.
Simply laying out the divs looks like this
https://jsfiddle.net/xzjp5xef/1/
HTML:
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
<div id="spacer">
150px spacer
</div>
</div>
<div id="rightcol">
right
</div>
</div>
CSS:
div {
height:200px;
border-style:solid;
display: inline-block;
border-width: 1px;
vertical-align: top;
}
#container{
white-space: nowrap;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
margin: 10px;
height: 20px;
}
#rightcol {
background-color: red;
width:100px;
}
The point of the "spacer" div is to represent the dynamic content which in this case I've fixed to 150px plus padding. So in this case I want the divs to lay out the way they do in the above fiddle, but then when the window is shrunk horizontally, I want the middle div to scroll and the left and right divs to remain fully visible.
That fails because then the window gets a scroll bar but the middle panel remains the same width and the right hand div disappears into the scrolled region.
My next attempt was using absolute positioning
https://jsfiddle.net/n4zrLqh2/
I fixed the left div to the left and the right div to the right and set the middle div's right and left properties. This is a neat trick which allows the middle div to stretch and take up all available space. This works nicely but doesn't create the effect I'm after when the window is big - because I don't want the middle column to expand further than is necessary to contain its content.
In the end I've solved this with javascript but would much prefer a CSS solution.
Edit: To help others see what I'm trying to achieve, here's the complete javascript solution (which I'd prefer to achieve with pure CSS):
HTML:
<div id="lcol">left</div>
<div id="midcol">
<div id="spacer">150px spacer</div>
</div>
<div id="rightcol">right</div>
CSS:
div {
height:200px;
display: inline-block;
vertical-align: top;
margin: 0px;
float:left;
}
body {
white-space: nowrap;
margin:0px;
max-height: 200px;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
height: 20px;
background-color: gray;
margin: 5px;
}
#rightcol {
background-color: red;
width:100px;
}
JAVASCRIPT (with jquery)
function adjustSizes() {
// Sizes of middle divs are dynamic. Adjust once
// built or whenever the viewport resizes
//
var $leftDiv = $('#lcol')
var $milddleDiv = $('#midcol');
var $rightDiv = $('#rightcol');
// 1. Resize middle div to available viewport space
var maxBodyWidth = $(window).innerWidth() - ($leftDiv.outerWidth() + $rightDiv.outerWidth());
$milddleDiv.css('maxWidth', maxBodyWidth);
}
$(window).resize(function () {
adjustSizes();
});
And the fiddle: https://jsfiddle.net/bjmekkgj/2/
I think setting max-width of spacer will solve your problem in case content increases.
Set max-width to calc(100vw - 200px) if all margin and padding are 0. Otherwise adjust the value 200px taking margin, padding into account.
I have created a plunker. Please check if it solves your issue. Try checking after running plunker in spearate window
http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview
For the one example you provided, since the left and right columns are positioned absolutely, you should take up the space somehow. I used padding on the middle column, then nested a "content" block inside that represents the visible part of the middle column. Then, I put overflow-x: auto; on the new content block and set a max-width on the overall container to force the new block to shrink.
(In previous edits, I was attempting to do this same thing but with floats instead of absolutely positioned divs)
* { margin: 0px; padding: 0px; }
#container {
box-sizing: border-box;
display: inline-block;
position: relative;
max-width: 100%;
border: 1px solid black;
height: 200px;
}
.column {
box-sizing: border-box;
height: 100%;
}
#left {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-right: 1px solid black;
background: blue;
}
#mid {
border: none;
padding: 0px 100px;
}
#mid > .content {
box-sizing: border-box;
background-color: yellow;
overflow-x: auto;
height: 100%;
}
#spacer {
width: 150px;
height: 20px;
}
#right {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-left: 1px solid black;
background: red;
}
<div id="container">
<div id="left" class="column">
left
</div>
<div id="mid" class="column">
<div class="content">
<div id="spacer">
150px spacer
</div>
</div>
</div>
<div id="right" class="column">
right
</div>
</div>
...and in JSFiddle form
flexbox can do that.
div {
border-style: solid;
border-width: 1px;
}
#container {
height: 200px;
display: flex;
}
#lcol {
background-color: blue;
width: 100px;
}
#midcol {
background-color: yellow;
flex: 1;
overflow-x: auto;
}
#rightcol {
background-color: red;
width: 100px;
}
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
</div>
<div id="rightcol">
right
</div>
</div>
JSfiddle Demo (showing overflow effect).
Support is IE10 and up.
Try setting the middle div to have a max width with a percentage so it will get thinner with the screen size:
.midcol {
max-width: 25%;
}
I put a value for the max-width in there for an example, but you can change the value.
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}
I'm making a site and trying to center the image head. However, it doesn't appear to be working.
Here is the HTML:
<body>
<div id="templatemo_header">
<div class="image"><img src="images/server_banner_lax_en5.png" alt="Header"></div>
</div>
</body>
And the CSS:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 762px;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}
#templatemo_header .image {
width: 762px;
margin: 0 auto;
}
I tried to add margin: 0 auto; to the image, but it still is not centered. How can I do this?
Modify the css for the div containing your image with:
margin: 0 auto;
width: 100%;
Add the following to your CSS file:
.image { width:762px; margin:0 auto;}
Your wrapping div is the same width as the image, this stops any margins from being automatically applied since there is no space.
There are a few ways to fix this, but easiest would be to set the width of templatemo_header (the wrapper div) to 100%. This way the image margins can expand, thereby centering the image.
So in your css, modify the width from 762px to 100%, like so:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 100%;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}
I have 2 divs, and I need both of them to have a minimum size of about 300px.
I need the left div to stretch out to the available space, however if the window size is too small, then the right div needs to drop below. This is what I have currently, but Im not sure what to change.
<style>
.bbleft {
min-height: 237px;
overflow:hidden;
}
.bbright {
float: right;
width: 300px;
min-height: 237px;
margin-left: 10px;
}
</style>
This is what you need
http://jsfiddle.net/fxWg7/790/
HTML
<div class="container">
<div class="left">
content fixed width
</div>
<div class="right">
content flexible width
</div>
</div>
CSS
.container {
height: auto;
overflow: hidden;
}
.left {
width: 300px;
float: left;
background: #aafed6;
}
.right {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
min-width:300px;
width: auto;
max-width:500px; /* not neccessary */
overflow: hidden;
}
fiddle
A css3 approach..
Flexible left div.
Right div drops when page too small.
Left div fills up the rest of the space.
HTML
<div class="left"></div>
<div class="right"></div>
CSS
body{
width:100%;
}
body div{
min-width:300px;
float:left;
}
.left{
width: calc( 100% - 310px );
}
simple use this
.bbleft {
min-height: 237px;
overflow:hidden;
float:left;width:100%;
}