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>
Related
I have the following code:
.parent {width: 960px; display: table}
.1 {
width: 45%;
margin: 20px;
float: left;
height: 1000px; /* it can be smaller or bigger than this value to fit its content */
}
.2 {
width: 45%;
margin: 20px;
float: right;
height: 200px;
}
.3 {
width: 45%;
margin: 20px;
float: right;
}
<div class="parent">
<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>
</div>
How do I write the CSS for class "3" so that its height automatically fill the remaining height of the table (in the case above, 720px, as the parent element will have, I assume, height of 1000px too)? Note that the height of class "1" can change according to its contents.
Off-topic: Is there a better way to make it look like the picture below other than the codes I'm using now (only using CSS and HTML)?
The Image of the Table
Try this one. the third element(green) will adjust based on the height of .one. But it is implemented based on the assumption that .two is having fixed dimensions.
.parent {
width: 960px;
border: solid 2px #999;
float: left;
position: relative;
}
.one {
width: 50%;
float: left;
height: 1000px;
background: #ccc;
}
.two {
width: 50%;
float: right;
height: 200px;
background: #aaa;
}
.three {
position: absolute;
top: 200px;
left: 50%;
right: 0;
bottom: 0;
background: green;
}
<div class='parent'>
<div class='one'>one</div>
<div class='two'>two</div>
<div class='three'>three</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;
}
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
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/
I have the following HTML snippet:
<body>
<div class="main">
<div class="topBar">
<p>testing</p>
</div>
<div class="content">
<div class="broadcastBar">
<p>testing</p>
</div>
<div class="mainBody">
<p>more testing</p>
</div>
</div>
</div>
</body>
Here is my CSS:
div.main {
}
div.topBar {
background-color: Black;
color: White;
height: 50px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
div.broadcastBar {
background-color: Gray;
width: 300px;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
div.content {
background-color: Yellow;
position: absolute;
width: 100%;
top: 50px;
left: 0px;
height: 100%;
}
My question is this. As you can see by the markup and CSS, I'm trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).
I've tried making it so that the content div doesn't have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.
Any idea what I can do hear to alleviate my issue?
Edit
Added desired output: this screenshot is currently what the above markup and CSS render. This is what I'm going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.
What is the best way to do this if not through absolute positioning?
What you are going to want to learn is using some standard formatting practises with float.
Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.
For Example:
div.topBar {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.broadcastBar {
background-color: Gray;
width: 70%;
height: 80%;
float: left;
}
div.content {
background-color: Yellow;
width: 30%;
height: 80%;
float: left;
}
#EDIT:
So you Have 3 divs and you will want to stack them sequencially.
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:
div.header {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.left {
background-color: Gray;
height: 80%;
width: 70%;
float: left;
}
div.right {
background-color: Yellow;
height: 80%;
width: 30%;
float: left;
}
#QUESTION:
So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.
<div class="container">
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
</div>
div.container{
height: 100px;
width: 100px;
float: left;
}
div.header {
background-color: Black;
color: White;
height: 20px;
width: 100px;
float: left;
}
div.left {
background-color: Gray;
height: 80px;
width: 70px;
float: left;
}
div.right {
background-color: Yellow;
height: 80px;
width: 30px;
float: left;
}