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.
Related
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/
i try to learn responsive website. but i get stuck in here
div {
display: block;
height: 50px;
}
.header {
width: 50%;
background-color: red;
}
.left {
background-color: green;
float: left;
width: 50%;
}
.right {
background-color: blue;
float: left;
width : 50%;
}
.clear {
display: none;
clear: both;
}
.footer {
width: 50%;
background-color: yellow;
}
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<body style="width: 100%">
<div class="header">without float</div>
<div class="header">without float</div>
<div class="left">kiri</div>
<div class="right">kanan</div>
<div class="clear"></div>
<div class="footer">after clear xxxxxxxxxx xxxxxx</div>
<div class="footer">after clear shshjsjaa shsusus</div>
</body>
</html>
why div class footer not back to normal like class header?
as i know clear: both clear :left is erase float: left rule. but i dont know why my footer looks pill up
looks for this image to see the display
You should not add "Display:none;" with "clear:both". that makes div hidden.
You dont need a separate div with class clear there
check this snippet
div {
display: block;
height: 50px;
}
.header {
width: 50%;
background-color: red;
}
.left {
background-color: green;
float: left;
width: 50%;
}
.right {
background-color: blue;
float: left;
width: 50%;
}
.footer {
width: 50%;
background-color: yellow;
clear:both;
}
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
</style>
</head>
<body style="width: 100%">
<div class="header">without float</div>
<div class="header">without float</div>
<div class="left">kiri</div>
<div class="right">kanan</div>
<div class="footer">after clear xxxxxxxxxx xxxxxx</div>
<div class="footer">after clear shshjsjaa shsusus</div>
</body>
</html>
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 don't want this scroll bar being here. I don't want it hidden but I want it disabled. No scrolling at all.
A screenshot: https://gyazo.com/22224e178263f80c25ecabb65c8ff77f.png
index.html and stylesheet.css:
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="white">
</div>
</body>
</html>
CSS:
html {
height: 100%;
background-color: #272C34;
margin: 0%;
padding: 0%;
}
body{
height: 100%;
margin: 0%;
padding: 0%;
}
#white {
width: 100%;
height: 76%;
background-color: #E8E8E7;
margin-top: 10%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
z-index: 1;
}
It is Problem of browser set default padding/margin. Apply any of CSS Reset to the website .
If Don't Add any one of them find here http://www.cssreset.com/
or Use this Universal CSS reset
* {
margin: 0;
padding: 0;
}
body usually has a margin set it, remove it and your div should be 100% of the screen:
body{
margin: 0;
}
Also be aware that more tags have margins/paddings applied by default, you could use a reset.css or normalize.css to remove margins/paddings/etc to make your page render the same on all browsers:
if You mean Space in right and left in your Tmp. Add this to your Style
Body{
margin:0;
padding:0;
}
HTML:
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
<li>
<ul>
Hello
</ul>
</li>
</div>
</body>
</html>
CSS:
body{
margin: 0;
}
#nav{
width: 100%;
height: 80px;
background-color: #000000;
}
#nav ul{
list-style-type: none;
color:#ffffff;
font-weight: bold;
}
Screenshot:
See it Live.
Use: width: 100vw; overflow-X: hidden;
This should work. When there is a scrollbar, use overflow-X:hidden for width or overflow-y:hidden for height;
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.