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;
}
Related
How can I make this iframe not overflow its blue container but instead fill the blue containers width and height?
In the below snippet, the iframe sits below the blue container. It should sit inside the blue container and take up the remaining page width (100% - 400px) and page height.
html, body {
margin: 0;
height: 100%;
min-width: 1000px; /*For debugging only*/
}
#menu-cnt {
float: left;
width: 400px;
height: 100%;
background-color: red;
}
#iframe-cnt {
width: 100%;
height: 100%;
background-color: blue;
}
#editor {
width: 100%;
height: 100%;
background-color: yellow;
}
<div id="menu-cnt"> </div>
<div id='iframe-cnt'>
<iframe id="editor" src='https://www.google.com' frameborder='0'></iframe>
</div>
I figured it out, I need to use a combination of fixed and absolute positioning.
html, body {
margin: 0;
height: 100%;
min-width: 1000px;
}
#menu-cnt {
position: fixed;
left: 0;
top: 0;
width: 400px;
height: 100%;
background-color: red;
}
#iframe-cnt {
position: absolute;
left: 400px;
top: 0;
right: 0;
height: 100%;
background-color: blue;
}
#editor {
width: 100%;
height: 100%;
}
<div id="menu-cnt"> </div>
<div id='iframe-cnt'>
<iframe id="editor" src='https://www.google.com' frameborder='0'></iframe>
</div>
You are overcomplicating a simple task:
body {
margin: 0;
height: 100vh;
display:flex;
min-width: 1000px;
}
#menu-cnt {
width: 400px;
background-color: red;
}
#iframe-cnt {
min-width:0;
flex:1;
background-color: blue;
}
#editor {
width: 100%;
height: 100%;
background-color: yellow;
}
<div id="menu-cnt"> </div>
<div id='iframe-cnt'>
<iframe id="editor" src='https://www.google.com' frameborder='0'></iframe>
</div>
I have a div with position: fixed but when I scroll the window at the bottom the div overlaps with the footer. I dont want the div to overlap with the footer.
What changes should I make in css to overcome that.
a.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div class="contain">
<div class="data1"></div>
<div class="data"></div>
</div>
<div class="footer"></div>
</body>
</html>
a.css
.contain {
margin-bottom: 35rem;
}
.data {
background-color: red;
width: 30%;
margin-top: -33%;
position: fixed;
height: 600px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
Just replace fixed with sticky. Please modify the code like below and see that works for you:
.contain {
/* margin-bottom: 35rem; */
}
.data {
background-color: red;
border: 4px solid black;
width: 30%;
bottom: 30%;
position: sticky;
height: 300px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 350px;
bottom: 0;
}
Unable to scroll when cursor is over the blue block at the top, any ideas of where I'm going wrong?
JSFiddle Demo
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$(".wrapper").scrollTop(300);
As you have the position to be fixed for the class block it will prevent the scrollbar from working. So change the position for class block.
Removed the wrapper div and add the "body" to the javascript
Update
http://jsfiddle.net/cr8uj/7/
JS
$( "body" ).scrollTop( 300 );
You have used css position: Fixed;, so class block will not move from its position and scrollbar will not work on mousehover event
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
background: #ccc none repeat scroll 0 0;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$( ".wrapper" ).scrollTop( 300 );
here is fiddle
please do not use fixed property on .block class
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
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/
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/