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>
Related
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 think the two states shown in the image are self-explanatory. The red lines have the same height, the blue bars have the same dimensions.
How can I achieve this layout? My attempt so far (may be used for testing): http://jsfiddle.net/n6zYE/
The doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> but could be changed to <!DOCTYPE html>.
The problem is, that I see no way to keep the red line the same height when the content gets bigger while still having no scrollbar when the content is small enough.
The restrictions are only, that I do not want to use anything that is supported by less than 90% of the users. For example box-sizing luckily is supported by ~93% of the users.
EDIT: I need a box-shadow on the black area, so overlays will not solve the problem. But besides this, Nulen made a working example (http://jsfiddle.net/n6zYE/2/) of how it shall behave.
You can do it dirty way with black divs as black margins with content like this:
#content {
min-height: 100%;
background: grey;
color: white;
width: 500px;
margin: 0 auto;
padding: 20px 0 70px 0;
box-sizing: border-box;
}
http://jsfiddle.net/n6zYE/2/
modify height of #inside div to test for different content.
EDIT: done with calc():
http://jsfiddle.net/n6zYE/9/
EDIT: done with overflow: auto;:
http://jsfiddle.net/n6zYE/10/
(note: this does not work entirely for my IE11) //nulen
I'm not 100% sure if this is what you require but give this a try
#foot { position:fixed;left:100px;}
#content {height:500px;overflow:hidden;
You will need to put position:relative around the containing div and also change the height accordingly on content div.
Typically you would wrap the actual content in a container that is set up to scroll. That way you can control the wrapper's height, and its content will scroll within it.
<div id="#bodyContent">
<div id="#wrapperThatScrolls" style="overflow-y:auto" >
<p>Content</p>
</div>
// Your red margin would appear here
</div>
Solution, using display: table, display: table-row and display: table-cell:
html { height: 100%; }
body {
background: green;
padding: 0;
margin: 0;
height: 100%;
}
#inside {
border: 2px solid white;
height: 200px;
}
#topcontentrow, #bottomcontentrow {
display: table-row;
height: 20px;
}
#contentrow {
display: table-row;
background: grey;
box-shadow: 0px 0px 20px 0px #000;
}
#content {
display: table-cell;
padding-bottom: 40px;
color: white;
}
#contenttable {
display: table;
height: 100%;
width: 500px;
margin: 0 auto;
}
#foot {
height: 40px;
position: relative;
margin: -60px auto 0;
background: blue;
width: 500px;
}
<div id="contenttable">
<div id="topcontentrow"></div>
<div id="contentrow">
<div id="content">
<div id="inside">
</div>
</div>
</div>
<div id="bottomcontentrow"></div>
</div>
<div id="foot">
</div>
Tested and working in FF 31.0 and IE 11
The display: table is supported widely.
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
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Make a div fill the space
How can I make an inner div extend to 100% of the container size? Please consider the example below where I want .footer to be 100% of the actual .wrapper size (which is 500px due to the .content inner element that has a width of 500px).
<html>
<head>
<style type='text/css'>
.wrapper {
width: 300px;
text-align: center;
overflow: auto;
}
.content {
width: 500px;
background-color: green;
}
.footer {
background-color: grey;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">PAGE CONTENT</div>
<div class="footer">FOOTER (should be 100%)</div>
</div>
</body>
</html>
If you take a look at http://jsfiddle.net/6at8Q/ and scroll right you will see that the grey bar will not extend.
The .wrapper is 300px, and .footer is a child of .wrapper. By default this will mean that the .footer is 300px. You have made your .content div 500px wide which is extending the .wrapper. Make the wrapper 500px or distinguish what width you actually want your content to be.
.footer {
background-color: grey;
width: 100%;
}
Beside this you should also edit your .wrapper class for perfection.
.wrapper {
width: 500px;
text-align: center;
overflow: auto;
}
Your code must be changed like this:
<html>
<head>
<style type='text/css'>
.wrapper {
width: 500px; /* <~~ This is changed from 300 to 500px */
text-align: center;
overflow: auto;
}
.content {
width: 500px;
background-color: green;
}
.footer {
/* width: 100%; <~~ You can add This line, but its not important, because a div tag always is 100% of its parent width */
background-color: grey;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">PAGE CONTENT</div>
<div class="footer">FOOTER (should be 100%)</div>
</div>
</body>
</html>
Or you can Do this:
.wrapper {
/* width: 500px; <~~ Delete This line */
text-align: center;
overflow: auto;
}
.content {
/* width: 500px; <~~ Delete This line too */
background-color: green;
}
.footer {
background-color: grey;
}
Then the .wrapper div extends to the page width (100% of body).
I've edited your fiddle check out http://jsfiddle.net/mAqJC/
Edit the width of the wrapper and everything should follow