I'm trying to put one div below another one, but the code is not working properly. As you can see in the code below, there is the wrapper ("#main"), then the top ("#top"), floating left, and the content ("#content"), floating left and clearing left also. Here is the code:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title></title>
</head>
<body>
<div id="main">
<div id="top">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#top{
width: 100%;
height: 100%; <!-- Already tried putting fixed height -->
left: 0px;
top: 0px;
position: absolute;
background-color: #ff0000;
display: block;
float: left;
}
#content{
width: 600px;
height: 400px;
left: 50%;
transform: translateX(-50%);
background-color: #999999;
position: absolute; <!-- Already tried removing this line -->
display: block; <!-- Already tried removing this line and the same one from #top-->
float: left; <!-- Already tried removing this line -->
clear: left; <!-- Already tried clear:both -->
}
But, for some reason, the grey div is not going under the red one. I have no idea what is happening. Please find below the image that is showing on my browser.
As top is positioned absoulte you cant clear left,
try reomving this property form #top
position:absolute;
and from #content remove
position:absolute;
transform: translateX(-50%);
float:left;
try this:
#top{
width: 100%;
height: 300px;
background-color: #ff0000;
float: left;
margin: 0;
}
#content{
width: 600px;
height: 400px;
background-color: #999999;
float: left;
clear: both;
}
and if you want the "content" to be to the right more, you can do something else:
#content {
width: 600px;
height: 400px;
background-color: #999999;
clear: both;
//NOTE MARGIN 0 auto will center the div for you
margin: 0 auto;
// or set a margin yourself ex:
margin: 0 5px 0 30px;
}
The thing is: when I remove
position:absolute
from #top and #content, the #top loses its height property. Also, a small white margin appears on Chrome. The only solution I found was to include position:absolute and top:0; and left:0;
The code I'm using now is
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title></title>
</head>
<body>
<div id="main">
<div id="top">
<p>aaa</p>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#top{
width: 100%;
height: 100%;
background-color: #ff0000;
float: left;
margin: 0;
}
#content{
width: 600px;
height: 400px;
background-color: #999999;
float: left;
clear: both;
}
But I want the #top to fill all the page when the page loads, and then the user has more content when he scrolls down.
Please find an image of actual page:
http://imgur.com/96gnwgv
Thanks!
Simply translate it with translateY. Here's the solution:
#top{
width: 100%;
height: 100%; <!-- Already tried putting fixed height -->
left: 0px;
top: 0px;
position: absolute;
background-color: #ff0000;
display: block;
float: left;
}
#content{
width: 600px;
height: 400px;
left: 25%;
background-color: #999999;
position:relative;
transform: translateY(150%);
}
Please try below code to remove top white line
body{
margin:0;
padding:0;
}
Position absolute consists from browser window in both left and top positions.
Please find the html and css code
<!Doctype>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#main{
width: 100%;
height: 100%;
margin:0 auto;
background-color: #ff0000;
}
#content{
width: 600px;
height: 400px;
margin: 0 auto;
background-color: #999999;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
TOP
</div>
<div id="content">
content
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hope this helps.
You can try this
HTML
<body>
<div id="main">
<div id="top">
TOP
</div>
<div id="content">
BOTTOM
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
CSS
#top {
width: 100%;
height: 100%; /**as you are giving here a 100% height you need to place some content inside the div **/
background-color: #ff0000;
display: block;
float: left;
}
#content {
width: 600px;
height: 400px;
background-color: #999999;
margin:0 auto;
}
Yo can see a fiddle here
http://jsfiddle.net/SoniaGM/ecu3fuzy/
Hope this helps.
Related
How do I extend the container around the wrapped elements so when I put in content it extends automatically? The container is stuck at the top of the page above the header even though the header is wrapped in the container div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basic</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="nav_left">
Home
About
Download
Contact
</div>
</div>
<div id="bigbox">
</div>
</div>
</body>
</html>
CSS
html{
}
body{
margin: 0;
padding: 0;
background-color: grey;
}
#container{
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
#header{
width:80%;
}
.nav_left{
float:left;
height:30px;
}
#bigbox{
width:80%;
}
You need to clear the floats in your #header element. I have my trusty .clear-floats class:
.clear-floats {
display: block;
}
.clear-floats:after
{
content: ".";
display: block;
width: 100%;
height: 0px;
visibility: hidden;
clear: both;
}
Add that to your stylesheet and then add class="clear-floats" to your header element.
When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}
Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/
So I have this HTML and CSS here:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<div id="wrapper">
<section id="sidebar">
<section class="widget">
This is a Widget. This type of widget is not collapsible.
</section>
</section><!-- I hate "display: inline-block;" whitespace
--><main>
</main>
</div>
</body>
</html>
main.css:
*
{
margin: 0;
padding: 0;
}
html, body, #wrapper
{
width: 100%;
height: 100%;
overflow: hidden;
}
#sidebar
{
display: inline-block;
background-color: #5C1B88;
width: 300px;
height: 100%;
}
#sidebar > .widget
{
width: 260px;
height: 200px;
margin: 0 20px;
background-color: rgb(210, 211, 228);
}
main {
display: inline-block;
background-color: #C2A1E7;
height: 100%;
width: calc(100% - 300px);
}
In both Firefox and Chrome, the section#sidebar is pushed down whenever I have text inside the child, section.widget. What' s causing this?
jsfiddle: https://jsfiddle.net/NeonGuilmon/k6qrbm04/embedded/result/
Because by default, inline elements have a vertical-align value of baseline. This applies only once it has any content, though. The solution is simple, define vertical-align: top; for #sidebar.
I have a site with a google map canvas on it. It has a header, a footer, and a side panel on each side, a container div and a map canvas div.
The container div contains the side panels and the map-canvas div. My problem is that I cannot get the container div and all divs it contains to stretch to the contents of the browser window vertically.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
</div>
<footer id="footer"></footer>
</body>
</html>
CSS
#container{ height: 100% auto;min-height:500px; width:100% auto;z-index:2;overflow:auto;}
#map-canvas { width:100% auto; height: 100% auto; min-height:500px; margin: 0px; z-index:3;padding: 0px; font-family: NotoSans, Helvetica, Arial; }
#panel { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:left; }
#panel2 { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:right; }
#header { background-color: #F0F0F0 ; width:100%; min-width:1000px; z-index:3;height:100px;}
#footer { background-color: #F0F0F0 ; width:100%; z-index:4;min-width:1000px;height:100px;}
html, body{ height:100%;width:100%; margin: 0px; z-index:2;padding: 10px; font-family: NotoSans, Helvetica, Arial; }
I'm not sure what you want, but this should work quite well, I think.
But be sure you also set media queries for width and height to keep the page responsive when visited on smaller screen (eg. phone).
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
}
#header, #footer {
position: absolute;
width: 100%;
height: 100px;
background-color: #F0F0F0;
}
#header {top: 0;}
#footer {bottom: 0;}
#container {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#panel, #panel2 {
background-color: #CCC;
width: 200px;
min-height: 500px;
float: left;
}
#panel2 {
float: right;
}
#map-canvas {
min-height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
<div style="clear:both"></div>
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
I'm learning CSS and I tried to create a simple layout.
I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Edit
Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.
Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".
I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it?
body {
margin: 0;
}
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 0;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Thanks
When using percentage widths the margin, padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.
margin: 0;
padding: 0;
border: none;
Alternatively, you could use the box-sizing property which will make the calculation include padding and border. Then you would only have to account for the margins elsewhere.
box-sizing: border-box;
Here you go:
body{
margin:0px;
}
div {
border-radius: 10px;
}
#wrapper {
padding: 0%;
}
#wrap {
float: left;
position: relative;
width: 100%;
}
#header {
position:fixed;
width:inherit;
z-index:1;
padding:0px;
height:50px;
border-radius:10px;
background-color: #80B7ED;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<html>
<body>
<div id="wrapper">
<div id="wrap">
<div id="header"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
See here jsfiddle
EDIT:
If you wish to add a margin, I'd suggest you add a variable margin, for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.
Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.