I want to make for my marketing site a 3 column layout that has images in the top banner.
I want to have a liquid left/right side with a fixed center. The html would ideally look like this:
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
<style>
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; }
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; }
#bannerCenter { /* something here to make fixed width of 1550px */ }
</style>
The images in the left/right pixel sides are 1px x 460px.
The image mybanner.png is 1550px x 460px.
Thanks in advance! (Especially if it will work in ALL browsers!)
Is this helpful?
CSS Only Demo
jQuery Demo(Cross Browser Compatible)
<div class="wrap">
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>
<div style="clear:both;"></div>
*{
margin:0;
padding:0;
}
#bannerCenter{
background:#ddd;
width: 500px;
float:left;
}
#pixelLeft{
background:#999;
width: calc(50% - 250px);
float:left;
}
#pixelRight{
background:#999;
width: calc(50% - 250px);
float:right;
}
#bannerCenter,#pixelLeft,#pixelRight{
height: 400px;
}
You can use jQuery instead of using calc(50% - 250px); to make it compatible for older browsers.
$(document).ready(function() {
$(window).on('resize', function() {
$('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2);
}).trigger('resize');
});
Update: June 2018
Added flexbox solution for same problem.
*{
margin:0;
padding:0;
}
.wrap {
display: flex;
}
#pixelLeft, #pixelRight{
display: flex;
flex:1;
}
#bannerCenter{
background:#ddd;
min-width: 500px;
display: flex;
flex: 1;
}
#pixelLeft{
background:#999;
}
#pixelRight{
background:#999;
}
#bannerCenter,#pixelLeft,#pixelRight{
height: 400px;
}
<div class="wrap">
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>
Here's a good solution, in my opinion the easiest one. It looks clean and it doesn't need wrapper div.
Demo
HTML
<body>
<div id="left_container">
<div id="left">
left content
</div>
</div>
<div id="center">
center content
</div>
<div id="right_container">
<div id="right">
right content
</div>
</div>
</body>
CSS
#left_container {
width:50%;
float:left;
margin-right:-480px; /* minus half of the center container width */
/* not important */
height: 200px;
}
#left {
margin-right:480px; /* half of the center container width */
/* not important */
background: #888;
height: 600px;
}
#center {
width:960px; /* size of the fixed width */
float:left;
/* not important */
color: #FFF;
background: #333;
height: 500px;
}
#right_container {
width:50%;
float:right;
margin-left:-480px; /* minus half of the center container width */
/* not important */
height: 300px;
}
#right {
margin-left:480px; /* half of the center container width */
/* not important */
height: 300px;
background-color: #888;
}
enjoy!
There are several solutions to this, probably the post popular of which is the Holy Grail method. It's a little above my head, but these links explain it pretty well.
http://alistapart.com/article/holygrail
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I would start with A List Apart's article. Good luck.
After re-reading it, I think this is what I would do:
HTML
<div id="header">
</div><div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div><div id="footer"></div>
CSS
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
You'll need to adjust some of the dimensions, but the inline comments should help with that. So there you have it. The Holy Grail Layout.
<body>
<div style=" width: 200px; float: left; background: red; height: 100px;">Left</div>
<div style=" float: right; width: 200px; background: red; height: 100px;">Right</div>
<div style=" background: blue; margin:0 auto; height:100px;">Center content goes here</div>
</body>
Here is simple trick through html and css only to do such a layered structure and it will keep middle layer in center even if you will resize browser.
Related
I want that yellow box to fill all the available space both vertically and horizontally without overlaying the picture.
(I'm trying to do it without using table properties)
Any ideas?
This is how it looks now:
and this is what i want:
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
float:left;
background-color: red;
padding:2%;
}
.content-block-image{
background-color: greenyellow;
float: right;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image"> <img src="image-1.jpg"> </div>
</div>
The problem is the float: left makes the yellow area not "stretch." To make the image float to the right of the text, it has to come before the text. So we change the order of the content blocks:
<div class="content-block-body">
<div class="content-block-image"> <img src="image-1.jpg"> </div>
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
</div>
And then adjust the css:
.content-block-body {
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
/*float:left;*/ /* this we remove */
background-color: red;
padding:2%;
/* this we add: */
overflow: auto;
}
.content-block-image{
background-color: greenyellow;
float: right;
}
Note that whenever you float things you'll most likely need to add what's called a "clearfix". In this case, apply the clearfix to the .content-block-body to make it extend vertically to fit the floated element http://nicolasgallagher.com/micro-clearfix-hack/
You have to specify width of left block and right block in CSS and make image width 100%
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
float:left;
background-color: yellow;
padding:2%;
width:56%;
}
.content-block-image{
background-color: greenyellow;
float: right;
min-width:200px;
width:40%;
}
.content-block-image img{
width:100%;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image"> <img src="image-1.jpg"> </div>
</div>
You can use css3 flex. That's the only thing that works just fine when it comes to getting the height of the parent node for child node. All the hacks for old browsers doesn't work always.
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
display: flex;
clear: both;
}
.content-block-text{
float:left;
background-color: red;
align-items: stretch;
}
.content-block-image{
flex: 1;
background-color: greenyellow;
}
.content-block-image img{
float: right;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image">
<img src="//placehold.it/250x250">
</div>
</div>
also check out this cool site for code snippets on centering in css.
I'm making a user-resizable GUI window with a header that gains height through new elements, a footer with static height, and a spacer in between that automatically takes up the rest of the height. I attempted using this answer, but the footer ended up vertically-centered. Picture:
If anyone knows why off the top of their head, it would be greatly appreciated. The element is being added to the page with javascript so the code is pretty messy. Thank you for your time.
What about the following:
<body>
<header class="header"></header>
<main class="spacer"></main>
<footer class="footer"></footer>
</body>
.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.spacer {
flex: 1;
}
I still don't know what the issue was, but I made a solution using the css calc() function.
HTML:
<div id="myWindow">
<div id="header">
Header
</div>
<div id="footer">
<div id="subHeaderContainer">
<div id="subHeader">
Sub Header
</div>
</div>
<div id="subFooter">
Sub Footer
</div>
</div>
</div>
CSS:
#myWindow {
width: auto;
height: auto;
resize: both;
border: 2px solid black;
overflow:hidden;
}
#header {
height: 20px;
background-color: grey;
}
#footer {
width:100%;
height: calc(100% - 20px);
}
#subHeaderContainer {
width:100%;
height: calc(100% - 30px);
}
#subFooter {
width:100%;
height:30px;
}
This is sort of hard to explain so I made a fiddle:
https://jsfiddle.net/8wujkpqb/
I have a right floating div with a max-width set. I need the div inside of that to take up 100% of the max-width so the content can be left-aligned to the content in the div below.
<div class="container">
<div class="mainleft">
<div class="outer-red">
<div class="first">
I need this<br/> pushed to the left<br/> to align with the<br/> lower text but still<br/> be in a "max-width"<br/> container floating right.
</div>
<div class="clear"></div>
</div>
<div class="outer-gray">
<div class="second">
this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width
</div>
<div class="clear"></div>
</div>
</div>
<div class="mainright">
<div class="right-content">
content
</div>
</div>
<div class="clear"></div>
CSS
.container {
width: 100%;
}
.mainleft {
width: 50%;
float: left;
}
.mainright {
width: 50%;
float: left;
}
.outer-red {
width:100%;
background: red;
padding: 40px;
box-sizing:border-box;
}
.outer-gray {
width:100%;
background: gray;
padding: 40px;
box-sizing:border-box;
}
.first {
float: right;
max-width:250px;
clear:both;
}
.second {
float: right;
max-width:250px;
}
.right-content {
width:100%;
background: blue;
padding: 40px;
box-sizing:border-box;
}
.clear {
clear: both;
}
https://jsfiddle.net/8wujkpqb/
Any help is greatly appreciated!
Just add another div into your "first" container that possesses the max-width and let the parent be the size that is necessary to align the inner container left. Like so
.first {
float: right;
max-width: 100%;
clear:both;
width: 200px
}
.inner {
max-width: 200px
}
https://jsfiddle.net/8wujkpqb/1/
I'm trying to do the next:
html > body > div-wrapper > div-left, div-separator, div-content
The three div will have the same height
If they are empty ( or no overflow), the height will be the 100% of the page (without scrolls).
If some of they overflows, I will have only 1 scroll that scrolls down/up the three divs at the same time (scrolling the wrapper i think).
It's this possible? I spent 7 hours thinking about it but I can't solve only with HTML + CSS (without using flexbox).
Thanks,
That's a great question! It took me quite a while to create a graceful solution for you.
What you need is the dynamic sticky footer technique with an extra container for columns.
HTML
<div id="container">
<header class="section">
foo
</header>
<div class="section expand">
<div class="columns-container">
<div class="column" id="a">
<p>Contents A</p>
</div><div class="column" id="b">
<p>Contents B</p>
</div><div class="column" id="c">
<p>Contents C</p>
</div>
</div>
</div>
<footer class="section">
bar
</footer>
</div>
CSS
/*************************
* Sticky footer hack
* Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
************************/
/* Stretching all container's parents to full height */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* Setting the container to be a table with maximum width and height */
#container {
display: table;
height: 100%;
width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */
.section {
display: table-row;
height: 1px;
}
/* The last-but-one section should be stretched to automatic height */
.section.expand {
height: auto;
}
/*************************
* Full height columns
************************/
/* We need one extra container, setting it to full width */
.columns-container {
display: table-cell;
height: 100%;
}
/* Creating columns */
.column {
/* The float:left won't work for Chrome for some reason, so inline-block */
display: inline-block; /* for this to work, the .column elements should have NO SPACE BETWEEN THEM */
vertical-align: top;
height: 100%;
width: 33.3333%;
}
/****************************************************************
* Just some coloring so that we're able to see height of columns
****************************************************************/
header { background-color: yellow; }
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
footer { background-color: purple; }
Demo
Compact columns content: http://jsfiddle.net/hsX5q/19/
One of the column's content overflows window height: http://jsfiddle.net/hsX5q/20/
PS
You've got a wrong CSS selector in your question. The correct would be:
html > body > div-wrapper > div-left,
html > body > div-wrapper > div-separator,
html > body > div-wrapper > div-content {
<style type="text/css">
.wrap {
border: 1px solid #f00;
height: 100%;
width: 100%;
}
.wrap div {
border: 1px solid #00f;
overflow: auto;
height: 100%;
width: 33%;
float: left;
margin: 0px;
}
</style>
<div class="wrap">
<div>Contents A</div>
<div>Contents B</div>
<div>Contents C</div>
</div>
or
<frameset cols="33%,*,33%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
Just do that :
.col{
display:block;
height:100%;
}
It's Simple, it's fast, it's css.
I have this problem, I have two divs:
<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>
How do I make div2 occupy remaining height of the page?
Use absolute positioning:
#div1{
width: 100%;
height: 50px;
background-color:red;/*Development Only*/
}
#div2{
width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/
}
<div id="div1"></div>
<div id="div2"></div>
You can use this http://jsfiddle.net/Victornpb/S8g4E/783/
#container {
display: table;
width: 400px;
height: 400px;
}
#container > div{
display: table-row;
height: 0;
}
#container > div.fill{
height: auto;
}
Just apply the class .fill to any of the children to make then occupy the remaining height.
<div id="container">
<div>
Lorem ipsum
</div>
<div>
Lorem ipsum
</div>
<div class="fill"> <!-- this will fill the remaining height-->
Lorem ipsum
</div>
</div>
It works with how many children you want, no additional markup is required.
Demo
One way is to set the the div to position:absolute and give it a top of 50px and bottom of 0px;
#div2
{
position:absolute;
bottom:0px;
top:50px
}
Since you know how many pixels are occupied by the previous content, you can use the calc() function:
height: calc(100% - 50px);
I faced the same challenge myself and found these 2 answers using flex properties.
CSS
.container {
display: flex;
flex-direction: column;
}
.dynamic-element{
flex: 1;
}
https://stackoverflow.com/a/35348188/1084619
https://stackoverflow.com/a/35348188/1084619
You can use
display: flex;
CSS property, as mentioned before by #Ayan, but I've created a working example: https://jsfiddle.net/d2kjxd51/
With CSS tables, you could wrap a div around the two you have there and use this css/html structure:
<style type="text/css">
.container { display:table; width:100%; height:100%; }
#div1 { display:table-row; height:50px; background-color:red; }
#div2 { display:table-row; background-color:blue; }
</style>
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
Depends on what browsers support these display types, however. I don't think IE8 and below do. EDIT: Scratch that-- IE8 does support CSS tables.
I tried with CSS, and or you need to use display: table or you need to use new css that is not yet supported on most browsers (2016).
So, I wrote a jquery plugin to do it for us, I am happy to share it:
//Credit Efy Teicher
$(document).ready(function () {
$(".fillHight").fillHeight();
$(".fillWidth").fillWidth();
});
window.onresize = function (event) {
$(".fillHight").fillHeight();
$(".fillWidth").fillWidth();
}
$.fn.fillHeight = function () {
var siblingsHeight = 0;
this.siblings("div").each(function () {
siblingsHeight = siblingsHeight + $(this).height();
});
var height = this.parent().height() - siblingsHeight;
this.height(height);
};
$.fn.fillWidth = function (){
var siblingsWidth = 0;
this.siblings("div").each(function () {
siblingsWidth += $(this).width();
});
var width =this.parent().width() - siblingsWidth;
this.width(width);
}
* {
box-sizing: border-box;
}
html {
}
html, body, .fillParent {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="fillParent" style="background-color:antiquewhite">
<div>
no1
</div>
<div class="fillHight">
no2 fill
</div>
<div class="deb">
no3
</div>
</div>
You could use calc function to calculate remaining height for 2nd div.
*{
box-sizing: border-box;
}
#div1{
height: 50px;
background: skyblue;
}
#div2{
height: calc(100vh - 50px);
background: blue;
}
<div id="div1"></div>
<div id="div2"></div>
<div>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
#header {
height: 200px;
}
#content {
height: 100%;
margin-bottom: -200px;
padding-bottom: 200px;
margin-top: -200px;
padding-top: 200px;
}
#footer {
height: 200px;
}
Why not use padding with negative margins? Something like this:
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
And then
.parent {
padding-top: 1em;
}
.child1 {
margin-top: -1em;
height: 1em;
}
.child2 {
margin-top: 0;
height: 100%;
}