I'm trying to create a div (gray background) at the top of my div-container and I can not make it match with the background-width size since there is a gap in the left side of the block.
Could someone explain me why?
body {
background-color: #a71930;
}
.container {
height: 1200px;
width: 1200px;
background-color: white;
margin-top: 50px;
}
div#about {
height: 400px;
width: 1200px;
background-color: #a5acaf;
margin-left: 0px;
}
<body>
<div class="container">
<div id="about"></div>
</div>
</body>
codepan
I couldn't reproduce your problem in codepen but there are couple of things that you can try here to fix this problem.
1- Reset the margin and padding of each html element to 0. Add following code to your CSS file.
*{
margin: 0;
padding: 0;
}
2- Set the width of second div to 100%
use the css code
.container{padding:0px}
I believe the 'gap' you mentioned is just because you didn't reset the margins of your <body> tag.
Just set it to 0 like so:
body{margin: 0;}
Related
I am putting entire website inside a div with ID container. The css for container is
#container {
width: 960px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
But the problem is that it also limits the background to 960px. I want to exclude background & allow it to fill entire screen. i.e repeat on x-axis
Use the following code - should work :
CSS
body {
width: 100%;
background: #fff;
}
HTML
<body>
<div id="container">
</body>
To do that,
First set your body's margin(left and right) to "auto", this way anything under the body will be centered.
So,
Here's the first code:
body{
margin: 0px auto;/* Centers your page */
background-color: #898989; /* Add a nice background-color */
}
There, Now for the div,
It is important to have a width defined for the div
so, assuming that your div is having an id called container:
#container{
width: 960px;
}
'
That's it! :D
I hope it's helpful!
Put background on parent element, eg. body.
body {background: url('...') repeat-x};
#container {width: 960px; ...}
just put what you want for background in body tag
body {
background:whatever_you_want;
}
I am using HTML and CSS.
I can't display all of my content in the middle of the screen for varying display sizes.
I have attempted to use % in place of PX but it's unsuitable for small screen size such as 800*600 pixels.
Also I have performed web searches but my lack of in-depth knowledge of HTML is hindering my progress.
my code is this:
<style type="text/css">
#Line5
{
color: #7B7BC0;
background-color: #7B7BC0;
border-width: 0px;
}
#wb_Text1
{
background-color: transparent;
border: 0px #8B8B00 solid;
padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
can someone correct this piece of code for me?
Don't know what your desired output is like. But check this out.
Click Here for Demo
<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>
Here updated code and its working fine.
<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
Not clear about your question but I think Either of the examples below could work for you ;
if you want it to be standards compliant, use this in your stylesheet:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
the body thing makes it work in IE, the margin:0 auto; makes it center in most other browsers.
you might have to go in and reset some of your main containers to text-align:left; because the body text-align:center sometimes cascades down into the site content, but you can counteract that by adding
text-align:left;
to #mainContainer
Or,
There may be better methods, but this works in all browsers so far :
body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
or set body width to 100% and then just make a container div for your page
#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
Also not quite sure what you're asking for. I'm interpreting it as you wanting the div to be centered vertically and horizontally, so that's what I'm going for.
HTML
<div id="wb_Text1">
<b>SAMPLE TEXT</b>
</div>
CSS
body {
height: 100%;
width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
height: 93px; //or whatever height you want
width: 300px; //or whatever width you want (can be in %)
background-color: #7B7BC0;
border: 0px;
padding: 0px;
font: 32px Arial;
line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
color: #fff;
text-align:center;
margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}
Here's what's happening inside the calc():
50% gives you half the total height of the page,
46.5px is half of the div's height, which in this case is 93,
50% - 46.5px gives you the amount of space needed to center the div vertically
Fiddle here: http://jsfiddle.net/Shiazure/hA9KB/
i thank all those who helped me. Problem was solved by adding the following code.
<style type="text/css">
div#container
{
width: 990px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
....
.....
........
<body>
<div id="container">
...
....
Thank you so much that help a rookie !
I have the following markup and it's all done for modern browsers. How can I modify this for getting the same for old browsers (IE7, etc.)? Is it only position absolute can?
<style>
html,
body {
height: 100%;
margin: 0;
}
.container {
box-sizing: border-box;
height: 100%;
padding: 15px;
background: darkgreen;
}
.sidebar {
height: 100%;
width: 200px;
background: #bada55;
}
</style>
<div class="container">
<div class="sidebar"></div>
</div>
Edit: I expect to get .container 100% of the window height and padding: 15px without scroll.
if you dont show or say, what you expect as a result its really dificult to help but you could use css hacks for ie7 like using the same property with a " * " that property will only work with ie7
Have you tried adding overflow:hidden to the container?
I have div (#child) which won't expand to the full height of it's parent (#parent). I've set the height for both html and body. It works if I set the parent's height as 100%, but I want the parent to have a minimum height, and the child to expand to the parent's full height.
HTML:
<html>
<body>
<div id="parent">
<div id="child">
<p>This area should be have the same height as it's parent.</p>
</div>
</div>
</body>
</html>
CSS:
html, body, header, h1, p { margin: 0; padding: 0; }
html { background-color: #DDD; height: 100%; }
body { background-color: #DAA; height: 100%; }
#parent {
min-height: 70%;
height: auto !important;
height: 70%;
background-color: #AAD;
}
#child {
height: 100%; /* why isn't this working ? */
width: 80%;
margin: auto;
background-color: #ADA;
}
JSFiddle: http://jsfiddle.net/nxVNX/11/
It works when you remove the !important; property. Maybe that's the problem?
I tried several other methods, but they didn't work, so the solution above could be the only one, I guess.
height: auto !important;
Don't ever use !important, because it cannot be overriden, work with it is harmfull.
It didn't work because it always used height: auto; not height: 70%;
A rule that has the !important property will always be applied no
matter where that rule appears in the CSS document.
So i recommend to you remove this line and it will works.
Have look for more information about What does !important mean in CSS?.
Am not sure why this is not working , but this will work
#parent {
min-height: 70%;
height: 100% !important;
height: 100%;
background-color: #AAD;
}
I already read a lot of posts about IE 11 with display: flex and min-height, but didn't find my answer.
I have a normal <div> with a min-height: 100vh;. In that <div> I have another element with a margin-bottom: 5px;. Now the whole outer <div> has a scrollbar and a transparent border at the bottom of 5px.
When I increase the margin, the gap at the bottom will increase the same.
Example:
<div class="layout">
<div class="panel">
Some content
</div>
</div>
body {
margin: 0;
}
.layout {
min-height: 100vh;
background: orange;
}
.panel {
margin-bottom: 40px;
background: white;
border-radius: 5px;
padding: 5px;
}
<div class="layout">
<div class="panel">
Panel
</div>
</div>
Now I made the code snipper, I see it also going wrong in Chrome.
I hope you understand me, but if you need more info please ask. I hope to find an answer!
Thank you,
Ronald.
Your issue is because of margin collapsing and it could be fixed in different ways.
Depending on your case, easiest is to use overflow: hidden for .layout:
.layout {
min-height: 100vh;
background: orange;
overflow: hidden;
}
You could also use padding-bottom on .layout instead of margin-bottom on .panel to avoid the issue with margins.
Another option could be clearfixing the .layout like so:
.layout:before,
.layout:after {
content: ' ';
display: table;
}