I'm currently working on my layout.
I have two left columns, not begining from the top of the document.
html:
<div id="site-logo">logo</div>
<section id="left-column">
<nav>nav</nav>
</section>
<header>header</header>
<main id="main-section">
<section id="second-left-column">
<nav id="sub-nav">sub nav</nav>
</section>
<section id="content">content</section>
</main>
css:
body { position: relative; }
header {
background-color:red;
height: 50px;
}
#left-column {
position: absolute;
width: 150px;
background-color:black;
height: 100%;
min-height: 100%;
top:100px;
bottom: 0px;
}
#site-logo {
width: 150px;
height: 100px;
background-color:yellow;
position: absolute;
}
#second-left-column{
width: 150px;
position: absolute;
height: 100%;
min-height: 100%;
background-color:grey;
top: 25px;
}
#main-section {
margin-left: 150px;
position: relative;
height: 100%;
min-height: 100%;
}
#content {
margin-left:150px;
background-color: blue;
min-height: 800px;
}
There is the Fiddle
I would like to have both the columns ending at the end of the document, hoefully at the same line than the content (blue)
How can I avoid the different margin bottom?
I can put the logo (yellow) inside the column if needed. We must keep the white strange space inside the layout
Try add a wrap div for all your divs and set it as overflow:hidden, see https://jsfiddle.net/jm4j9h04/4/
<div style="overflow:hidden;">
<div id="site-logo">logo</div>
<section id="left-column">
<nav>
nav
</nav>
</section>
<header>
header
</header>
<section id="main-section">
<section id="second-left-column">
<nav id="sub-nav">
sub nav
</nav>
</section>
<section id="content">
content
</section>
</section>
</div>
body { position: relative;}
header {
background-color:red;
height: 50px;
}
#left-column {
position: absolute;
width: 150px;
background-color:black;
top:100px;
bottom: 0px;
}
#site-logo {
width: 150px;
height: 100px;
background-color:yellow;
position: absolute;
}
#second-left-column{
width: 150px;
position: absolute;
height: 100%;
min-height: 100%;
background-color:grey;
top: 65px;
}
#main-section {
margin-left: 150px;
position: relative;
height: 100%;
min-height: 100%;
}
#content {
margin-left:150px;
background-color: blue;
min-height: 800px;
}
Related
I am using position:absolute in CSS to create an underlay for the next div but once I start to scroll, the underlay stays in place and only the next divs will move. I'd like to have the underlays move with their divs but I am not sure how to do that in CSS.
Example code:
.inner {
height: 2em;
width: 300px;
overflow-y: scroll;
}
.progress {
position: absolute;
width: 20px;
background-color: green;
opacity: 0.4;
height: 20px;
}
<div class='inner'>
<div class='progress'></div>
<div>hello</div>
<div>hello2</div>
<div class='progress'></div>
<div>hello3</div>
</div>
Simply add position:relative to inner to make their position relative to inner :
.inner {
height: 2em;
width: 300px;
overflow-y: scroll;
position:relative;
}
.progress {
position: absolute;
width: 20px;
background-color: green;
opacity: 0.4;
height: 20px;
}
<div class='inner'>
<div class='progress'></div>
<div>hello</div>
<div>hello2</div>
<div class='progress'></div>
<div>hello3</div>
</div>
If you are interested with another solution you can use pseudo element to avoid adding extra element :
.inner {
height: 2em;
width: 300px;
overflow-y: scroll;
}
.progress {
position: relative;
}
.progress:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 20px;
background-color: green;
opacity: 0.4;
}
<div class='inner'>
<div class='progress'>hello</div>
<div>hello2</div>
<div class='progress'>hello3</div>
</div>
I have a div ".container" with two divs: first ".blue" and second ".green".
I got my green div fixed to the bottom-0, but I need to put the first div blue to backboard the green div.
http://jsfiddle.net/washington_guedes/k959kmqd/
css:
.container{
position: relative;
width: 100%;
}
.blue{
position: relative;
width: 100%;
background-color: #acf;
}
.green{
position: fixed;
bottom: 0;
width: 100%;
height: 250px;
background-color: #bfb;
}
html:
<!-- some divs before -->
<div class="container">
<div class="blue">Blue</div>
<div class="green">Green</div>
</div>
You could set both div to be absolute position and then play with whatever you need to do:
.container{
position: relative;
width: 100%;
}
.blue,
.green {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 250px;
}
.blue{
background-color: #bbf;
}
.green{
background-color: #bfb;
top: 250px;
}
Divs in top of each other http://jsfiddle.net/vfpzbj9q/
Divs overlapping http://jsfiddle.net/wkkyoz0h/
here is the HTML code i am using:
<div id="header">123</div>
<div id="editorcontent">
<div id="ta_a"><textarea style="resize: none;"><? echo $t1; ?></textarea></div>
<div id="ta_c"><textarea style="resize: none;"><? echo $t2; ?></textarea></div>
<div id="centerinfo">CONTENT 1</div>
<div id="clear"></div>
<div id="centerinfo">CONTENT 2</div>
<div id="ta_b"><textarea style="resize: none;"><? echo $u1; ?></textarea></div>
<div id="ta_d"><textarea style="resize: none;"><? echo $u2; ?></textarea></div>
</div>
and the CSS:
#editorcontent {
min-height: 400px;
min-width: 800px;
overflow: hidden;
position: relative;
height: auto;
width: 100%;
}
#ta_a {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_c {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#ta_b {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_d {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#centerinfo {
text-align: center;
position: relative;
width: 19.6%;
height: 40%;
display: inline-block;
}
#clear {
clear:both;
min-height: 10px;
}
#header {
height: 44px;
background: #D00000;
}
The problem is that the 2 times 50% from the textareas are not not looking at the header causing the page always to be too large in height...
Fiddle http://jsfiddle.net/5SD2U/
To accomplish this, you need either javascript/jQuery or a CSS hack. I made a fiddle with the CSS hack. It involves setting your #editorcontent div to 100%, adding a header_placeholder div, and setting the header's position to absolute. Also keep in mind that you will always have to manually set the height of the header and the placeholder to the same number.
Also you have to set the body and html to padding: 0, margin: 0, width: 100%, and height: 100%, else this probably won't work in all browsers.
Here is the working fiddle:
http://jsfiddle.net/5SD2U/1/
And here is the code for reference:
The HTML:
<div id="header">123</div>
<div id="editorcontent">
<div id="header_placeholder"></div>
<div id="ta_a"><textarea style="resize: none;">1</textarea></div>
<div id="ta_c"><textarea style="resize: none;">2</textarea></div>
<div id="centerinfo">CONTENT 1</div>
<div id="clear"></div>
<div id="centerinfo">CONTENT 2</div>
<div id="ta_b"><textarea style="resize: none;">3</textarea></div>
<div id="ta_d"><textarea style="resize: none;">4</textarea></div>
</div>
And the CSS
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#editorcontent {
height: 100%;
min-width: 800px;
overflow: hidden;
position: relative;
height: auto;
width: 100%;
}
#header_placeholder {
height: 44px; /* height of the header */
}
#ta_a {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_c {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#ta_b {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_d {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#centerinfo {
text-align: center;
position: relative;
width: 19.6%;
height: 40%;
display: inline-block;
}
#clear {
clear:both;
min-height: 10px;
}
#header {
height: 44px;
background: #D00000;
position: absolute;
width: 100%;
I'm trying to figure out how to write some css for a peculiar layout I haven't seen before. The image below contains the sections. For guidance:
Section "1" is a header, that should be fixed within the alpha zone
Section "2" is a div which ought to have a scrollbar when it gets too tall (determined by the height of the viewport/window)
Section "3 "is a footer, that should be fixed within the alpha zone
Section "4" is a right hand, fluid, container, that will have an iframe. The iframe itself will manage the scrolling.
Any thoughts?
My code at the moment is kind of all of the place, but this is the gist of how close I got:
CSS:
.controller {
width: 400px;
height: 100%;
}
.controller header {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 400px;
}
.controller footer {
position: absolute;
bottom: 0;
left: 0;
height: 60px;
width: 400px;
}
.controller .body {
overflow: scroll;
}
.focus {
float: left;
width: 100%;
}
Markup:
<div class="wrapper">
<div class="container">
<header></header>
<div class="body">
<footer></footer>
</div>
<div class="focus">
</div>
</div>
Here is a demo in jsFiddle for how to achieve this,
The style I used is
body, html {
padding:0;
margin:0;
}
.container {
width: 25%;
height: 100%;
float:left;
position:absolute;
}
.container header {
display:block;
height: 10%;
width:100%;
background-color:#ff5;
}
.container .body {
position: relative;
overflow: auto;
width: 100%;
height:80%;
background-color:#f5f;
}
.container footer {
position: fixed;
bottom: 0;
left: 0;
height: 10%;
width: 25%;
background-color:#5ff;
}
.focus {
background-color:#ddd;
position: fixed;
left: 25%;
width:75%;
height: 100%;
overflow:auto;
}
.focus iframe{
width:99%;
height: 99%;
}
Hope this help you.
i want to place the div according to the image displayed . The top ones have been done however not able to place the bottom two my current style sheet is as follows:
#container {
position: relative;
height: 400px;
width: 100%;
min-width: 400px;
margin: 0 auto;
}
#left, #right {
position: absolute;
bottom: 201px;
}
#left {
left: 0;
width: 484px;
height: 195px;
}
#right {
right: 0;
width: 508px;
height: 196px;
}
One more thing my container contains all the divs
Someone please help
Something similar to this - JSFiddle ?
HTML:
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
CSS:
.row{ overflow: hidden; margin: 4px; }
.col1, .col2{ float: left; width: 250px; height: 100px; }
.col1{ background: red; }
.col2{ background: green; }