I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
Related
I was trying to make a border glued to the sides of the screen how represents the picture below :
Picture of how i want
I have html code, but i don´t know if i´m doing in the best way. Can you guys help me?
DIV Rectangle HTMl
<div class="content">
This is a rectangle!
</div
DIV Rectangle CSS:
.content {
width:100%;
min-height: 150%;
border:1px solid #FFFF;
border-width: 100%;
background-color: #FFFF;
border-radius: 5px;
padding-bottom: 50%;
}
It is like this:
Picture of how it is
I want to remove this spacing between border and screen, is it possible to do that?
There are 2 solutions:
You can remove your parent block paddings (set it to 0)
You can wrap your .content with an additional block and set its margins to negative values (adjust numbers to fit your layout):
.wrapper { margin: 0 -5px; }
Divs are block-level elements and will take the full width that is available. So, the issue isn't actually the .content div. It's likely that the body has a margin still set on it. It will probably take care of it if you add:
body { margin: 0; }
This is just a guess that it's on the body, but really it's whatever parent or ancestor has margin or padding.
Same problem here
*,html {
margin:0;
padding:0;
}
Hope this helps, "*" will set the whole page to 0
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
i'm extremely frustrated right now. I can't figure out why my container won't extend to the bottom of the page. it reaches the bottom of the visible window, but if you scroll down past that, then the background ends.
my basic structure looks something like this...
<div id='container'>
<div id='content'>
/*Some Content here but all divs opened here are closed. (Title Bar, Nav, etc)
<div id='mainTableContainer'>
/*This is where a bulk of the code is. A table is generated in PHP and it
gets fairly lengthy.
</div>
</div>
</div>
So that's basically the HTML. I can't for the life of my figure out why #container won't
extend to the bottom of the page!
And the CSS
html{
height:100%;
}
body {
font: 100%/1.4 "Museo-sans", Verdana, Arial, Helvetica, sans-serif;
background: #ccc;
margin: 0;
padding: 0;
color: #000;
height:100%;
background-image:url(images/bg.png);
}
.container {
width: 960px;
background: #FFF;
height:100%;
margin: 0 auto;
border-left-style:dashed;
border-right-style:dashed;
border-width:1px;
border-color:#bf0000;
}
.content {
height:100%;
padding: 10px 0;
}
#mainTableContainer{
margin:0px auto;
width:90%;
height:100%;
text-align:center;
}
I tried a lot of the tips I found on this site, but nothing was helping. I don't think anything is floated. I tried setting all the heights to 100%, I tried setting a min width... I can't figure it out!!
EDIT:
OK I MADE A JSFILDDLE
So if you shrink the size of the display second in jsfiddle to smaller than the table, and then refresh it, you'll see that the background doesn't go all the way down, and the table is left 'floating' in the air.
http://jsfiddle.net/LGM3y/1/
You're trying to select a class, but container is an ID, so you need:
#container
instead of
.container
If that doesn't fix it try setting the background CSS on the HTML tag instead of the container.
html{
height:100%;
background:#ccc url(images/bg.png);
}
etc
It seems to work fine (if I understand exactly what you're asking) if you remove the
html {height: 100%;}
The container fills the space ..
One trick I use for this on <div>'s (which has mixed results in IE) is to specifically set display: block in the CSS rules for the container that you want to extend.
Example:
#container {
display: block;
height: 100%;
}
I am trying to make an infinite footer to the sides, and even though it's infinite, there is a small margin to the left and right of the footer. I don't have any margins set to my body, html, or anything, so I am unsure on what may be causing this.
Here is my footer css:
#footer {
height: 72px;
width: 100%;
background-color: #174466;
margin: 0 auto;
}
And here is the html:
<div id="footer">
</div>
Any ideas? Thanks!
I don't have any margins set to my
body, html
That either means you're not setting it at all, or that you're setting it to 0.
I'm going to guess that you're not setting it at all, and so you need to zero out the default margin/padding on body/html.
Try adding this CSS, preferably at the top of your style sheet (for good organization):
html, body {
margin: 0;
padding: 0
}
As an experiment, I've been trying to center a DIV in a BODY tag using percentages in CSS. I think I had it figured out at one point, but thanks to the magic of TopStyle not having a history once you save, I lost it.
So, here is my HTML:
<html>
<head>
<link href="shadow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box"></div>
</body>
</html>
And, here is my CSS:
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #EEEEEE;
margin: 10%;
}
div#box
{
position: absolute;
background-color: #FFFFFF;
width: 740px;
min-width: 80%;
min-height: 80%;
border: #CCCCCC thin solid;
}
To answer your immediate questions:
Why am I using absolute positioning on the box?
So that the box will accept 80% as it's height even without content to stretch it.
Why am I width, min-width and min-height like this?
Since I want the box DIV to take up 80% of the available space, it made sense to use minimums. I'm using a pixel width to make sure that no matter how small the area gets, it won't go any thinner than 740px, causing the browser to activate the horizontal scroll bar. In theory, they content height should activate the vertical scroll bar if the content pushes passed 80% of the available area.
Now the trick is to get it dead centered and maintain a 10% space around the box. I've tried applying "margin: 10%;" to BODY, then "padding: 10%;" to BODY, and finally "margin: 10%" to the box DIV. All of those choices gives me the same result: it's centered horizontally but is acting strange vertically. I'm not getting even space on all sides. The only thing that is behaving as wanted is that the box DIV does appear to be using 80% of the available space.
It seems like this should be right. The box DIV is taking up 80%, the margins are taking up 10% on each side (20% vertically and 20% horizontally), making 100%. Not sure why it's not working.
I swear I had this working in a similar manner, and now I've lost it.
Does anyone have an explanation as to why the percentages don't seem to be displaying correctly and what solution I would need?
Thanks!
Try it like this:
*
{
margin: 0;
padding: 0;
}
body { background-color: #EEEEEE; }
div#box
{
position: absolute;
border: #CCCCCC thin solid;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
min-width: 740px;
min-height: 500px;
}
IE will allow for the DIV to shrink below your limits since min-width and min-height do not work.
Remove position:absolute; from #box
Add this to #box - margin:0 auto;
Get rid of the stuff in body
JSFiddle Demo
JSFiddle Edit