I want to have a <div> in my <body> that is 95% of the page's width and height. I want this <div> to be centered on all sides, such that a 2.5% margin exists on all sides of the <div>. The attached code almost works, but the top has no margin, such that the <div> extends all the way to the top of the page. I am using a reset. Can anyone offer some insight as to why this isn't working as intended?
The most important thing for me here is that I have no interest in working with non-relative measurements. I am coming from a background in Android development and believe that anything I make should scale to (almost) any screen size.
I would also like to say that I am just starting with HTML/CSS/JS and at this moment have no intention of supporting browsers that do not comply with the W3C standard (IE). Furthermore i would like to avoid anything that seems like a hack or a workaround.
The CSS Reset in case your interested: http://79.170.44.85/rasmussenprojects.com/reset.css
A hard copy since I can only post 1 link and it seems best to link to the reset:
<!doctype html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
html, body{
background-color:rgb(25,25,25);
height:100%;
width:100%;
}
.content-panel{
background-color:rgb(50,50,50);
width:95%;
height:95%;
margin:auto;
}
</style>
</head>
<body>
<div class="content-panel">
</div>
</body>
</html>
div{
background: lightgray;
bottom: 0;
height: 95%;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 95%;
}
<div>
content
</div>
My take would be that you just give the body a padding: 2.5% (and don't forget position:relative).
The div then should just fill up all available space with position:absolute;top:0;right:0;bottom:0;left:0;
In general I also would work with box-sizing:border-box
Related
Could you please advise how to divide the screen into two halves horizontally? Here is my attempt, but the height=100% kind of doesn't work. (I intend the whole screen to be covered) How can I make it work? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
.t7{width: 50%; height: 100%; background-color: #506970; }
</style>
</head>
<body>
<div class=t7>aaa</div>
<div class=t7>bbb</div>
</body>
</html>
Both the html and body tag should have their width and height properties set to 100%. By default the height won't be 100%, which is why these elements do not expand vertically. As a side note, you might also want to set the margin (specifically on the body) to zero.
Also, whitespace between elements can cause problems when you are trying to use up 100% of the width. And because you are using div elements, you will want to set their 'display' property to 'inline-block'. By default they use 'block', which causes a line break (effectively) after the element, so the two elements wouldn't be side-by-side.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.t7{width: 50%; height: 100%; background-color: #506970; display: inline-block; }
</style>
</head>
<body>
<div class=t7>aaa</div><div class=t7>bbb</div>
</body>
</html>
In this case you can use vh units for the screen height.
vh – Relative to 1% of the height of the viewport.
Your code will look like that:
.html
<div class="top"></div>
<div class="bottom"></div>
.css
.top, .bottom {
height: 50vh;
}
As a result, the screen will be splitter in half horizontally.
In order for the CSS height property to work using percentages, the parent element must have a defined height. So to fix this, you must git the <body> a height of 100%. But in order for that to work, you must also give the <html> a height of 100%.
html, body { height: 100% }
Another option is to use the viewport width/height vw/vh measurement instead of percentage based measurement.
.t7 { width: 50vw; height: 100vh; ... }
On my current project, all I want is to use CSS/HTML only to get my image, within a , to resize with the page. I had this working on a previous site and now...it just isn't. When the browser window is resized, it just cuts off the image, from the right side; no resizing whatsoever.
#charset "utf-8";
/* CSS Document */
div.divBannerScale {
width: 100%;
height: auto;
}
img.bannerScale {
max-width: 100%;
min-width: 40%;
height: auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<link href="/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bannerDIVcontainer" class="divBannerScale">
<img src="Images/bannerFull-01.png" width="2561" height="445" class="bannerScale" />
</div>
</body>
</html>
I've tried adding margin: 0 auto, display: block, padding, etc on each the div class and the image class but ultimately removed them since it didn't seem to make a difference. (And wasn't needed in the past.)
I really don't understand why it's not working now when it was on the other, much messier-coded site. I'm not an expert, clearly, but usually I can figure these things out.
Any help would be much appreciated.
Perhaps your image is already 40% of its original size? In my testing, the code seemed to work fine.
Trimming out all redundant the CSS just leaves (if the min width was indeed too big):
img.bannerScale {
max-width: 100%;
min-width: 1%;
height: auto;
}
You can see a live example here.
Note that that you don't need to do anything to the div size as it will just be as big as whatever you put in it (assuming you're not doing anything funky such as absolute positioning)
I am trying to make a horizontally scrolling website, the difficulty i am facing is to fix my page's height to the device's. Furthermore, if i fix the height's value in the css then it becomes hard coded for that particular screen size, so whenever i open the page on a differently sized monitor the hard coded value creates trouble. I have used a very basic css till now, here it is :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
#body {
width: 4000px;
height: auto;
max-height:100vh;
}
</style>
<title></title>
</head>
<body id=body>
--\\CONTENT GOES HERE \\--
</body>
</html>
This should give you what you are looking for. You can add an overflow-yproperty as well just to be sure y scrolling is disabled. Just make sure the rest of your content is responsive so that it can resize with the view height.
#body {
width: 4000px;
height: auto;
max-height: 100vh;
overflow-y: hidden;
}
According to this website
https://www.w3schools.com/html/html_blocks.asp
a div is a block element and "a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)."
Then why does this code not color the upper part of the page red?:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
</style>
</head>
<body>
<div style="background: red;float: left; height: 20%;"></div>
</body>
</html>
When I add "width = 100%" to the style of the div, I get what I expect without that variable. Why doesn't it stretch out by itself?
A floated empty div has no height or width.
You've given it a height, but it still has zero width. Only when it also has a width (or some content) will you see it.
The default block behaviour you've referenced doesn't apply to a floated element.
Because you have float: left in there (which only takes the width of its content and wouldn't make any sense for 100% width anyway) - just remove it:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
</style>
</head>
<body>
<div style="background: red;height: 20%;"></div>
</body>
</html>
In order to stretch out the floated div element, the styling for its width must be explicitly stated. If you neglect to specify it, then the browser only stretches it as much as it needs. So, either adding width="100%"to the DIV tag or adding width:100% to the its styling are options so that the floated div occupies the full width, even if it lacks content.
The source that the OP cites applies to an "unfloated" div element. But, a div that is floated, as is the case in the OP's CSS code, does not follow the usual rules per MDN:
...the element is taken from the normal flow of the web page, though
still remaining a part of the flow ...
In this particular case, since the OP indicates that the floated div should stretch out completely, it seems superfluous to have the div float left; that float property should probably be deleted unless the OP expects the width to dynamically change at some point.
Another way to stretch out the div element is to add this CSS to its styling: display:flex which creates a flex box.
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
div {
background: red;
height: 20%;
display:flex;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Note: while I removed the float property for the flex-box, you may leave it as it will have no effect on the flex-box.
No matter what I do, I cant get my website to center when looking at it in the browser :/. I've looked all over google/youtube and tried everything. Getting very annoyed with it at this point.
Heres the code:
<!doctype html>
<html>
<head>
<title>01_Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Save for Web Styles (01_Home.psd) -->
<style type="text/css">
<!--
#Table_01 {
overflow: hidden;
min-width: 1600px;
}
#id01-Home {
position:relative;
width:1600px;
height:8226px;
margin:0 auto;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0; margin-right: 0px;">
<!-- Save for Web Slices (01_Home.psd) -->
<div id="Table_01">
<div id="id01-Home">
<img src="images/01_Home.jpg" width="1600" height="8226" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
I suggest you apply the following styles to your BODY tag:
text-align:center;
And then create an outer container (say DIV.container) with the following styles:
text-align:left;
width: 50%;
margin: 0 auto;
Remove all other styles until you have that working then re-add any styles that you require.
Here is an example:
https://jsfiddle.net/wshobaqh/
(sorry, I can't work out how to apply a snippet into SO)
For screens wider than 1600px (which seem to be your only concern) you can simply add margin: 0 auto; to #Table_01 to center it. But below that width you'll need a completely different approach.
Details depend on your actual content and layout which is not visible in your code - or is that image really your only content? If yes, I'd suggest to use percentage values for width (like 100% width for the image and its parent elements) to be able to view the whole image on smaller screens.