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.
Related
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
So basically I'm just messing around here using the bootstrap system and there seems to be a small gap on the right side of the screen. There are no box shadows or anything because I saw in one or two other posts that that was causing a similar issue with people.
html,
body,
.container {
height: 100%;
width:
}
.container {
display: table;
min-width: 100%;
overflow: hidden;
min-width: 100%;
margin-top: -50px;
padding: 50px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
footer {
background-color: #374754;
height: 75px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
z-index: 1;
}
.row {
height: 100%;
width: 100%;
}
#library {
background: blue;
}
#main {
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 no-float" id="library"> library
</div>
<div class="col-sm-10 no-float" id="main"> main</div>
</div>
</div>
<footer>footer</footer>
</body>
</html>
I've ripped it apart and I can't seem to figure out what's causing it. Any help is appreciated.
Remove the 100% width setting for .row - that's a bootstrap element which has its own, predefined CSS settings which you shouldn't change (except for height, maybe). This include settings for left and right margins and padding which seem strange at first sight, but which are part of the bootstrap system.
Plus you had in invalid line in your first rule for html, body and .container ("width: ..."), so that rule didn't apply at all.
html,
body,
.container {
height: 100%;
}
.container {
display: table;
min-width: 100%;
overflow: hidden;
min-width: 100%;
margin-top: -50px;
padding: 50px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
footer {
background-color: #374754;
height: 75px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
z-index: 1;
}
.row {
height: 100%;
}
#library {
background: blue;
}
#main {
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 no-float" id="library"> library
</div>
<div class="col-sm-10 no-float" id="main"> main</div>
</div>
</div>
<footer>footer</footer>
</body>
</html>
One of your CSS scripts adds margin-left: -15px to your row. That generally shifted the divs to the left.
And that same script adds padding-left: 15px; and padding-right: 15px;, so they don't span completely from left to right.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Meriniuc Răzvan - Dumitru</title>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div id="header">
<h3>
Cv
</h3>
</div>
<div id="footer"></div>
</body>
</html>
.left {
border-radius: 10px;
background-color: green;
height: 310px;
width: 75px;
float: left;
margin-top: 65px;
}
.right {
border-radius: 10px;
background-color: blue;
height: 310px;
width: 50px;
float: right;
margin-top: 65px;
}
#header {
position: fixed;
height: 65px;
background-color: red;
width: 720px;
border-radius: 10px;
display: block;
}
#footer {
clear: both;
height: 65px;
width: 720px;
background-color: black;
border-radius: 10px;
}
h3 {
margin: auto;
}
With "margin:auto".
Without "margin:auto"
I am learning HTML and CSS and have tried to create a CV page, but my header won't center. I have read about this problem and the general solution seems to make the header display as a block, but it still doesn't work.
Could you please explain why this code does not center my header and offer a possible solution? Thank you in advance!
Auto margins centre the element. They don't centre the inline content of it.
The header is centred. The text "Cv" is aligned to the left of the header.
To centre that, use text-align.
Use text-align: center; The h3 tag contains text.
h3 {
text-align: center;
}
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.
I'm creating a webpage with two stacked divs. The first div is a banner and the second div is the content. The problem I'm facing is I want the second div to stretch to the bottom of the page without creating a scrollbar. I could wrap the whole thing in another div and set overflow to hidden, but the second div will be filled with content and there's a possibility that the content could stretch beyond the screen. Here is what I've written so far:
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
width: 100%;
height: 180px;
}
#content {
background-color: #0F0F10;
width: 100%;
height: 100%;
color: #FFF;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>
You can do it pretty easily by wrapping your #banner inside your #content container:
<div id="content">
<div id="banner"></div>
<p>Your content</p>
</div>
Then in your CSS, you have to explicitly set the padding and margins on the body and html to 0 (the wildcard doesn't work cross-browser):
*, html, body {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
height: 180px;
}
#content {
background-color: #0F0F10;
min-height: 100%;
color: #FFF;
}
The 2 other changes that I made were to remove the width: 100% rules (since the div's are block elements and will default to that) and change your height: 100% to min-height: 100% since this will allow your #content to grow with its content.
If you need to support IE6, you'll have to serve it height: 100% with conditional comments, on account of IE6 not understanding min-height, but treating height as min-height.
You can see it in action here. Just delete the filler text and you'll see the scrollbar disappears when it's not needed anymore.
I recommend using a <table>. Set the height of the table to be 100%. Then set the height of the first cell to 180px.
You will need to ignore the distant howls of the Semantic Web when you do this, however.
Here is some sample code:
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
table {
width:100%;
height:100%;
border-collapse:collapse;
}
td#banner {
background-color: red;
height: 180px;
}
td#content {
background-color: #0F0F10;
color: #FFF;
}
</style>
</head>
<body>
<table>
<tr><td id="banner"></td></tr>
<tr><td id="content"></td></tr>
</table>
</body>
</html>
You can achieve the same without restructuring the HTML. If you don't want to wrap the banner in the content (e.g. for semantic reasons), you should use absolute positioning on the content. Instead of setting the height to 100% you set top:181px and bottom:0 in CSS.
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: blue;
height: 100%;
}
#banner {
background-color: red;
width: 100%;
height: 180px;
}
#content {
background-color: #0F0F10;
width: 100%;
position: absolute;
top: 181px;
bottom: 0px;
color: #FFF;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="content"></div>
</body>
</html>