Considering the following code:
<div class='wrapper'>
<div class='right-panel'>Here is the article</div>
<div class='left-panel'>
<div class='left-panel-contents'>
<div class='headline'>
<h1>HEADLINE</h1>
</div>
</div>
</div>
</div>
.wrapper {
height: 200px;
min-width: 960px;
max-width: 1060px;
background: gray;
}
.right-panel {
float: right;
height: 200px;
width: 760px;
background: blue;
}
.left-panel {
background: green;
height: 200px;
}
.left-panel-contents {
position: relative;
background: pink;
height: 100%;
width: 15%;
// how do I make this fill the width of the left panel
}
.headline {
background: black;
color: white;
line-height: 45px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}
h1 {
float: right;
}
http://jsfiddle.net/duw4G/
I'm trying to get the headline text to expand all the way to the right panel. If the left panel contents perfectly filled its parent, this would be possible. If I set it to 100%, overflow: hidden it doesn't solve the problem (the left-panel-contents fill the whole wrapper div width)
Is there any way to adjust my technique to get this to work?
.wrapper {
height: 200px;
min-width: 960px;
max-width: 1060px;
background: gray;
}
.right-panel {
float: right;
height: 200px;
width:75%;
padding:0px;
margin:0px;
background: blue;
}
.left-panel {
background: green;
height: 200px;
width:25%;
padding:0px;
margin:0px;
}
.left-panel-contents {
position: relative;
background: pink;
height: 100%;
width: 100%;
// how do I make this fill the width of the left panel
}
.headline {
background: black;
height: 45px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
float:left; position:relative;
}
.headline will be positioned according to the nearest parent with non-static position (i.e. relative or absolute), or to the viewport if no such parent is found.
If it's not required for other purposes, remove position:relative from .left-panel-contents but add it to .wrapper. See: http://jsfiddle.net/duw4G/9/
Related
I have the following code:
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
top: 10%;
left: 0;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 0;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
My question is why is the top:10% of .p1_1 affecting the position of .p1_2? I would have thought this was a really simple relative placing of the div following the second - unless I'm missing something blindingly obvious?
Ok - so the following code is nearer what I was expecting but how there is 15% of space not 10% (i.e. set margin-top:15% works fine) so I'm confused how 70 + 10 + 20 can't equal 100??
html,body {
padding:0;
margin:0;
height:100%;
position:relative;
}
.container {
width:30%;
margin:0 35%;
background:yellow;
position:absolute;
height:100%;
top:0;
}
.p1_1 {
position:relative;
width:50%;
height:70%;
margin-top:10%;
background-color:green;
}
.p1_2 {
position:relative;
width:100%;
height:20%;
background-color:blue;
}
I've also found http://www.barelyfitz.com/screencast/html-training/css/positioning/ on tab 2 explains how
"Notice the space where div-1 normally would have been if we had not
moved it: now it is an empty space. The next element (div-after) did
not move when we moved div-1. That's because div-1 still occupies that
original space in the document, even though we have moved it."
Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
left: 0;
top: 10%;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 10%;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
I have 2 div inside a wrapper div. I wanted to stack div2 below div1 but it keep overlay div 1 instead. Can anyone help ?
Here my code
CSS:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
body {
margin: 0;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
position: absolute;
background-color: #bdc3c7;
width: 100%;
height: 75%;
margin: 0;
display: block;
float: left;
left: 0;
top: 0;
}
.div2 {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
background-color: red;
}
.compass {
position: relative;
width: 180px;
height: 190px;
float: right;
margin-top: -1%;
overflow: hidden;
}
**HTML:**
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
</body>
</html>
Have try solution like using absolute position but it doesn't work.
Change the css on div2 to position relative to the bottom
.div2 {
position: absolute;
width: 100%;
height: 25%;
bottom: 0;
left: 0;
background-color: red;
}
You have used absolute positioning to specifically place the div elements at the same position. Remove the absolute positioning (and float also), and the div elements line up one below the other:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: blue;
}
.div1 {
height: 75%;
background-color: #bdc3c7;
}
.div2 {
height: 25%;
background-color: red;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
Try this instead https://jsfiddle.net/2Lzo9vfc/143/
CSS
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
background: #bdc3c7;
width: 100%;
display: block;
height: 75vh;
}
.div2 {
background: red;
width: 100%;
height: 25vh;
display: block;
}
Your're mixing several layouyt modes. If you use floats for this then you cant't mix it with absolute positioning...
Anyway div is a block tag, what means that your two divs should stack even if you don't set any css property to them, just give the a concrete height, for example 200px.
If you want to cover the full browser viewport, that is what I think you want then is enough with this:
.wrapper {
width: 100%;
height: 100vh;
background-color: blue;
}
.div1 {
background-color: #bdc3c7;
width: 100%;
height: 75vh;
}
.div2 {
width: 100%;
height: 25vh;
background-color: red;
}
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/
I am trying to make a 3-column layout but as you can see from the screenshot below the left-most and right-most columns don't span all the way down:
You can find the code at http://codepen.io/vbelenky/pen/hvbEq and I'm going to paste it here, too:
<div class="wrapper">
<div class="primary">
<div class="primary-left">
Primary Left<br>
blah
</div>
<div class="primary-right">
Primary Right
</div>
</div>
<div class="secondary">
Secondary
</div>
</div>
CSS:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
}
.secondary {
width: 200px;
float: left;
background: cyan;
}
.primary {
width: 400px;
float: right;
}
.primary-left {
width: 300px;
float: left;
background: grey;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
}
HTML :
Use follow code that is similar to your query :
<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</br>Center<br/>Center<br/></div>
<div class="right">Right</div>
</div>
CSS :
.mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% }
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; }
.center{ margin: 0 100px;background:green; }
http://jsfiddle.net/pfqpR/
Like monkhan said, you'll need to set heights for all of the elements, for example (see on CodePen):
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
height: 40px;
}
.secondary {
width: 200px;
float: left;
background: cyan;
height: inherit;
}
.primary {
width: 400px;
float: right;
height: inherit;
}
.primary-left {
width: 300px;
float: left;
background: grey;
height: inherit;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
height: inherit;
}
The downside of this approach is that you'll need to know what the maximum height is ahead of time (in this case, I picked 40px).
One way to approach this is with absolute positions (instead of floats). It doesn't fit to all needs, but it may fit yours.
http://codepen.io/anon/pen/lLngy
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
position: absolute; top: 0; left: 0; bottom: 0;
}
.secondary {
width: 200px;
background: cyan;
position: absolute; top: 0; bottom: 0;
}
.primary-left {
width: 300px;
background: grey;
position: absolute; top: 0; left: 200px; bottom: 0;
}
.primary-right {
width: 100px;
background: yellow;
position: absolute; top: 0; right: 0; bottom: 0;
}
One approach that wouldn't require you to set any pre-determined heights would be to apply a 3-colour background image to the wrapper (image height can be 50px and "repeat-y").
This way you will have the background colours of the inner divs repeating all the way down to the bottom and it won't matter which inner div is the tallest.
For example:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
background-image: url('3colours.png');
background-repeat: repeat-y;
}
Others said it well. I am just showing another possible way(inconvenient). Inconvenient because it makes the width changing more difficult. Just a background image hack. Use a background image of (wrapper width x 1)px for the .wrapper with colors at appropriate positions. Also remove the background color styles from .secondary, .primary-right and .primary-left.
Here is the fiddle: http://jsfiddle.net/eY9VR/
My coworker gave a solution. The main idea is not to use float property and use display table and table-cell. Please refer to the code for reference. I had to move div.secondary to the top, I commented out the float attribute everywhere, I've declared div.wrapper as display: table and div.secondary, div.primary-left, and div.primary-right as display: table-cell.
I am trying to construct a layout in my "app-view" div where the "leftPane" has a fixed with and the "rightPane's" width extends with the browser width (percentage). Is this possible with CSS (no Javascript)? Below are my basic styles for the layout in the div.
#app-view
{
width: 100%;
height: 400px;
}
#leftPane
{
float: left;
width: 33.33%;
max-width: 250px;
height: 400px;
background: blue;
}
#rightPane
{
float: left;
width: 66.66%;
height: 400px;
background: green;
}
You can use left and right on #rightPane instead of width. You also need to make #app-view positioned relatively and both panes absolute.
#app-view
{
width: 100%;
height: 400px;
position: relative;
}
#leftPane, #rightPane
{
height: 100%;
position: absolute;
}
#leftPane
{
width: 250px;
background: blue;
}
#rightPane
{
left: 250px;
right: 0;
background: green;
}
JSFiddle
<div>
<div id="leftpane" style="float: left; width: 250px;">left pane content</div>
<div id="rightpane" style="margin-left: 250px;">right pane content</div>
</div>