I have looked around for a few different solutions on Google and tried them out, but I still cannot seem to get my page border to work.
I tried creating another div container to contain everything on the page, then I had the div with the four div circles on the inside, but that did not work when I added the border.
So, I took the outer div away and just left the one div with the four div circles inside.
Finally (what is below), I tried adding the border to the body, but it still does not put the border around the entire page.
I have a feeling that the problem might have to do with height and width values, but I have played with those as well and could not get the desires results.
Thanks for any advice
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background: white;
border: 1px solid #ff0000;
width: 100%;
height: 100%;
}
.circle {
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align: center;
display: inline-block;
}
.container {
text-align: center;
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<center>
Welcome to My Website!
<br>
<br>
</center>
<div class = "container">
<div class= "circle" style = "background-color:red">About</div>
<div class= "circle"style = "background-color:orange">Homework</div>
<div class= "circle"style = "background-color:red">Blender</div>
<div class= "circle"style = "background-color:orange">Research</div>
<div class= "circle"style = "background-color:red">English</div>
</div>
</body>
</html>
try this
html,body{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background: white;
border: 1px solid #ff0000;
-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;/* Firefox, other Gecko */
box-sizing: border-box;/* Opera/IE 8+ */
}
Related
Here is a simple block of code:
<style type="text/css">
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
}
</style>
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
But, the results are different when viewed in different screen widths.
Here, the child div completely fits the parent div at a certain screen width.
But here, when at a different screen width, a white space of about 1px appears on both the sides of the child div.
How can I get rid of this white space and make sure that the child div completely fits the parent div?
The issue lies with the border you've used and the way browsers handle this. Setting the box-sizing to border-box solves this issue. It's a common one but once you know it you'll be able to better spot it.
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
margin: 0;
}
<!DOCTYPE html>
<div class="parent">
<div class="child"></div>
</div>
Also, you don't need to define text/css in your tags these days, browsers know what the code is. Also try not to use it inline unless it was just for this question. Similarly, the <center> tag has been depreciated which means it's no longer supported in HTML 5 so you should center things using margin or flex. Margin is the easiest so that's why I've added that here.
Sometimes browsers will treat things differently in quirks mode too, so make sure you have a doctype declaration.
This is because you are using Chrome browser.
I have the same behavior with the very simple code:
<div class="container">
<div class="item-a">item A</div>
</div>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
width: 500px;
height: 500px;
border: 5px solid black;
background-color: cornflowerblue;
}
.item-a {
width: 300px;
height: 140px;
background-color: orange;
border: 3px solid crimson;
}
At 100% zoom it has a gap. When I zoom, the gap disappears, but when I zoom again - the gap between container and item-a may or may not show up again (you can notice cornflower background of 1px between a parent and child borders).
This is how Google Chrome handles things in both Linux and Windows 11 at the moment.
Then I gave a shot to view the same code via Firefox and there is no gap regardless of zooming.
Contrary to the many answers suggesting to set box-sizing: border-box, I used content-box instead and it fixed my issue: box-sizing: content-box
Try set child with the same width: 75vw;
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 75vw;
height: 100px;
background-color: #999;
}
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
I'm reading through an HTML/CSS book and trying to place multiple div elements side-by-side via float, each with a fixed width and margin so that they fit perfectly into the page width. Even boiling down the book's example to its most simple form, the last column is always bumped down as though the containing element wasn't big enough. Any insight?
<html>
<head>
<style>
body {
width: 960px;
}
#c1, #c2, #c3 {
float: left;
width: 300px;
height: 50px;
margin: 10px;
border: 1px dashed black;
}
</style>
</head>
<body>
<div id="c1">
</div>
<div id="c2">
</div>
<div id="c3">
</div>
</body>
</html>
https://jsfiddle.net/1otbf659/
Because you have border, and your divs not 300px. Your divs are 302px.
Just add box-sizing: border-box to your divs.
#c1, #c2, #c3 {
float: left;
width: 300px;
height: 50px;
margin: 10px;
border: 1px dashed black;
box-sizing: border-box;
}
Here is JSFiddle demo
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.
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.
I have a problem with my pixel calculations not adding up.
I have a main div (#page) that is: 980px wide
It has a child div (#content) that is also: 980px wide
Inside the div (#content) there are two divs (#left-pane), which is 300px wide and (#right-pane), which is 676 px wide.
Both of them have a 1px border all the way around - looking across the site horizontally this should give 4px in width.
Therefore,
300px + 676px + 4px = 980px
Despite this, my div (#right-pane) moves down below the div (#left-pane). Why?
I have padding and margin set to NONE on both of them.
HTML:
<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="nav">
<div class="nav-button">Home</div>
<div class="nav-button">Lessons</div>
<div class="nav-button">Guides</div>
<div class="nav-button">About us</div>
</div>
<div id="content">
<div id="left-pane">
</div>
<div id="right-pane">
</div>
</div>
<div id="footer">
<div>
</div> <!-- Page closer -->
</body>
</html>
CSS:
html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: black;
}
#page {
width: 980px;
margin: 0px auto;
}
/* Top */
#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}
.logo {
float: left;
width: 130px;
height: 130px;
}
.social {
float: right;
margin-right: 40px;
}
.social li {
display: inline;
margin: 0px 10px 0px 0px;
}
/* Nav */
#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}
.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}
/* Content */
#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}
#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}
#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}
/* Footer */
#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}
I'm not sure if this will work or not, but add this and see if it works.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
What browser are you using to test your site?
I tossed up your code on a fiddle, and it appears just fine in my Firefox, which suggests that you're probably looking at it in IE, and possibly either in a non-standards mode, or an old version.
If that's the case, then it's due to how IE (namely, old versions), handle the box model and math. To IE, 300px + 676px + 4px > 980px . The easiest way to fix this is to reduce something that affects the width by 1-2px, and it will probably fix it.
To consider a width of a div, there are 4 comoponents you should think about
The width of the div itself (this is where your text will be for example)
The padding width (surrounding the width mentioned in point 1 above)
The width of your border (surrounding the padding)
The margin (surrounding the border)
So, if you search for CSS Box Model (some examples are here http://www.w3.org/TR/CSS2/box.html and here http://www.w3schools.com/css/css_boxmodel.asp), you will be able to see the box model that will help you with that. Also using jQuery you can retrieve the width of each section using the following methods: .width(), .innerWidth(), and .outerWidth(). Note you may need to do some calculations to finds border width, padding width, or margin width.
Read CSS documentation and jQuery documentation to have a clearer idea of how those work. Sometimes you may need to utilize jQuery to make the width calculations for you properly if you need some exact values with variable width objects.