Lets say we have this html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="navbar"></div>
<div id="main">
<textarea id="input"></textarea>
<textarea id="output"></textarea>
</div>
</body>
</html>
and this css:
html,body,#main{
height:100%;
}
html{ border: 1px solid red; }
body{ border: 1px solid green; }
#main{ border: 1px solid blue; }
#navbar{ height: 30px; }
textarea{
width: 45%;
height: 60%;
resize: vertical;
}
#input{
float: left;
}
#main{
float: right;
}
If you look at result then you can see here body is out of html tag, #main is out of body and html tag.. How I can make so all the elements to not go out of parent height? So I want the result to be like this:
For one thing, the body has defaults margins of 8px;
Start by resetting those.
body {
margin:0px;
}
Additionally, borders are not calculated into the heights, rather they are added. Therefore the heights were really 100% + 2px borders. You can change this by adding box-sizing: border-box;.
This will solve the problems with the html/body. Now, for #main - the reason this was occuring, was because a 30px nav was placed outside of it. #main was actually 100%, however it was 100% under 30px, that's why you saw a gap.
Updated jsFiddle here
Related
This is basically what I am trying to do:
Step 1 have a HTML file with elements:
example image of HTML file
Step 2 (add borders to the side of the screen):
Same file with borders on sides.
(code of the HTML file):
<a>hello</a>
I attempted to use divs on the sides of the screen, that didn't work.
I also attempted to put my elements inside of a div and use the aspect-ratio property to try and have the same effect, that didn't work.
Hope this all makes sense.
Here is an example with flex :
<html>
<head>
<style>
.flex {
display: flex;
justify-content: space-between;
}
/* Define the styles for the page borders */
.border-left {
width: 33%;
height: 100vh;
background-color: black;
}
.border-right {
width: 33%;
height: 100vh;
background-color: black;
}
</style>
</head>
<body>
<div class="flex">
<div class="border-left"></div>
<div><h1>content</h1></div>
<div class="border-right"></div>
</div>
</body>
</html>
You could just set the body background and reduce the size of a. Something like this.
body {
background-color: grey;
}
a {
width: 33%;
margin: auto;
}
In the future, you should replace a with a div with a container class or something like that.
.main{
border-right: 25px solid black;
border-left: 25px solid black;
height: 100vh
}
.container{
height: 300px;
text-align: center
}
<div class="main">
<div class="container">
this is container
</div>
</div>
I am learning html and i cant understand why when i have two lines inside one div the second line doesn't fall within the borders of the div.
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="testingsite.css">
</head>
<body>
<div><header><h3>Line 1</h3>
<br><h5>Line 2</h5></header></div>
</body>
My css isn't showing in a code block properly so i put a jsfiddle link below.
Thanks for any help.
https://jsfiddle.net/xLjsmrfc/
you can try this one:
add height :auto;
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: auto;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
DEMO HERE
You have a height property set in the CSS for the header tag.
height: 75px;
This restricts the height of the <header>, and thus the border. Remove the height property and things will correct.
Dear you are writing the code right but there is a small flaw in Css.
Both lines are falling within the Div just height of Div is Creating dilemma for you.
I've two methods for you :
----------1. Altering Your own code----------
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
----------2. Second My Way :----------
<style>
body {
background-color: white;
border: 5px solid blue;
}
#myid{
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
</style>
</head>
<body>
<div id="myid">
<header>
<h3>Line 1</h3><br>
<h5>Line 2</h5>
</header>
</div>
</body>
The problem is really with the styling you've done.
Change the div height to something like greater than the current 75px
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
Whenever you are using heading tag then those tags are taking their own padding and margin by which they are out of your border as you have given height to container so use heading tag according to your need.
Header tags ( h1...h5 ) have some default margins.
You can add the margin:0px for that and it will work fine.
Here is a simple piece of code, resulting in blue span element overflowing out of yellow and black box.
I know, I can use overflow property to hide/scroll it, but I rather need to resize the #inner and #outer containers to cover it (so that scrollbar would rather be on whole page instead of in the containing div). Is there any way?
The content ( = width) of "blue span" is dynamicly generated from application?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; width: 400px; }
</style>
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</html>
If you want the two outer boxes to resize dynamically based on the content thats inserted in the span, you will have to reconsider your approach. All boxes that scale dynamically cannot have a width defined, so they cannot be centred using the margin: auto. However, it is possible to achieve the same effect by wrapping the whole thing into another box that covers the full width of the page, text-align centring that box and then making the outer box displayed inline-block. This is the code that works. Now you can add a min-width to the content box if you want and it will scale nicely. Heres some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#wrap {
width: 100%;
text-align: center;
}
#outer {
display: inline-block;
background: black;
margin: 10px 0;
padding: 20px;
}
#inner {
background: yellow;
height: 200px;
}
#inner span {
background: blue;
display: block;
}
</style>
<div id="wrap">
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</div>
</html>
I think so you can add % units for your divisions to make it as perfect
Here is the CSS
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; }
Here is the fiddle
http://jsfiddle.net/mohamedmusthafac/n6CEx/
I think so this is what you are expecting for??
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example
I want to make two divs equal heights – left and right divs.
I referred the following posts and found a bottom padding approach.
How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
CSS: How to make left float div to adjust height dynamically?
I tried to apply this concept in my page; but it doesn’t work correctly. On top of the right div there is unwanted space. How can we rectify it?
CODE
<!DOCTYPE html>
<style type="text/css">
.myContent {
width: 100%;
border: 2px solid violet;
min-width: 1210px;
}
.myHeader {
width: 100%;
/*width: 1200px;*/
clear: both;
background-color: #DFE8EF;
border: 1px solid red;
}
.leftPart {
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
background-color: silver;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float: left;
min-width: 1000px;
/*
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
*/
}
</style>
<html>
<head>
<title>UpdateAccrualByItem</title>
<link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<div class="myContent">
<div class="myHeader">
<img src="/Images/logo_header.jpg" />
</div>
<div class="leftPart">
Menu
</div>
<div class="rightPart">
<h2>UpdateAccrualByItem</h2>
</div>
</div>
</div>
</body>
</html>
You are very close, but just have a few little things wrong.
You don't need a width for the right column, just the default width:auto. I used the same negative margin and padding trick to make the right column's height the size of the left's height and also to give the right column the illusion of taking up the rest of the space. You also should float the right container and take away the margin. You can remove the clear:both of the left column because it's not used
Demo here
.leftPart {
border: 1px solid blue;
width: 200px;
height:200px;
float:left;
background-color: orange;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float:left;
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
}
Edit
You might also add some type of #media query to allow adjusting the window to look more smooth. Here is an example. It's semi-hard coded based on the text length in the example, but on your final product it might be something you add on at the end