I want to set two divs like the following.
http://snag.gy/ynuiY.jpg
This is my HTML code
<div id="topbar">
This is a top bar
</div>
<div id="wrapper">
wrapper
</div>
This is my CSS
#wrapper{
z-index:2;
marign-top: 30px;
width:80%;
height:auto;
background-color:#FFF;
left:auto ;
right:auto ;
margin: auto;
}
#topbar{
height:30px;
width:100%;
background-color:#333;
position:absolute;
top:0px;
left: 0px;
right: 0px;
color:#FFF;
overflow: hidden;
}
But the output is like following. (no wrapper)
http://i.stack.imgur.com/DXuWD.jpg
Please help me to solve this.
You have to change your #wrapper margin to padding
JSfiddle Demo
CSS
#wrapper{
padding-top: 30px;
}
Another solution is to set #topbar position to relative:
#topbar{
height:30px;
width:100%;
background-color:#333;
position:relative;/*Change to relative*/
color:#FFF;
overflow: hidden;
}
Also is margin-top no marign-top
fiddle
I think this is what you're after:
http://jsfiddle.net/ht8k40tr/
The problem is due to the order in which you're setting the margins.
Currently you're setting the top margin to be 30px, but then you're resetting that by setting all margins to auto, a simpler way to do this is just to set the margin as follows margin: 30px auto which sets the top margin to 30px, and the remaining margins to auto.
Change the "margin-top: 30px;" to "padding-top: 30px;"
#wrapper {
padding-top: 30px;
width:80%;
height:auto;
background-color:#FFF;
left:auto ;
right:auto ;
margin: auto;
}
Related
I have a confirm box and I want to show it in the middle of my screen.
margin 0 auto does not solve my problem.
How can I center it?
https://jsfiddle.net/y5u5obL0/
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
It's because the element is fixed.
You need to add left: 0;/right: 0 in order for the element to be centered (in combination with margin: 0 auto). In doing so, the element technically stretches to fill the screen, but since it has a width specified, it will be contained and centered within the available space.
Updated Example
#confirmBox {
position:fixed;
left: 0;
right: 0;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
Use the following code to vertically and horizontally center anything, change relative to absolute if you want to remove it from the page flow. Check out the demo to see it in action
(Demo)
HTML
<div class="wrap">
<div class="mycontent">
Hello World!
</div>
</div>
CSS
.wrap {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
max-width: 100%;
max-height: 100%;
}
Margin: 0 auto; will not work until you will not provide left:0; and right:0
check fiddle for working example :https://jsfiddle.net/nileshmahaja/y5u5obL0/1/
CSS
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
left:0; /* Added Property */
right:0; /* Added Property */
}
take a look at the footer div here which contains all rights reserved
all 3 divs have a width of 70%, but the footer's width is displayed more than intended
#header{
width:70%;
margin: 0 auto;
background:#CCCCCC;}
#container{
width:70%;
margin: 0 auto;
background:#CCCCCC;
}
#footer{
width:70%;
background:#000000;
color:#FFFFFF;
position:fixed;bottom:0;
left:15%;
}
It's because of the default margin/padding on the body element. it's a good idea to use a reset at the top of your css for consistency. ie
*{margin:0;padding:0;}
This will save you a lot of headaches.
reset the margin, padding for body.
body{
margin: 0;
padding: 0;
}
Updated fiddle
#footer{
width:68%;
margin: 0 auto;
background:#000000;
color:#FFFFFF;
position:fixed;bottom:0;
left:16%;
}
or can reset the body padding and margin
body{
margin:0;
padding:0;
}
It's been a while since I handcoded a website, and now I have the issue that my top-margin causes the 100% height to give a nasty scrollbar, as seen in the fiddle:
http://jsfiddle.net/qKGzA/
I can't figure out how to get rid of this, without cutting off the footer (like with using overflow:hidden).
It probably is a simple solution but I can't think of it :)
Thanks for your help!
My code:
html, body{
background-color:#ececec;
height:100%;
width: 100%;
margin:0;
padding:0;
}
div#wrapper{
background-color:#ffffff;
width: 962px;
height: auto !important;
min-height: 100%;
height:100%;
margin:0 auto;
padding:20px 15px 0px 15px;
position:relative;
display:block;
}
footer{
background-color:#363636;
width:95%;
height: 15px;
margin:0;
padding:10px;
position:absolute;
bottom:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#e1e1e1;
text-align:center;
}
footer p{
margin:0;
padding:0;
display:inline-block;
}
footer p.divider{
margin:0 20px;
}
HTML:
<body>
<div id="wrapper" >
<header>
header header
</header>
<menu> Menu menu</menu>
<section>
section section
</section>
<footer>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p>
</footer>
</div>
</body>
The div#wrapper has height:100% and padding:20px 15px 0px 15px making it 100% + 20 pixels. if you add
box-sizing:border-box;
to div#wrapper the padding will be inside the 100%, and the scroll bars disappear.
A non-css3 alternative is to place an element at the top of the inside of the div#wrapper with a height of 20 pixels. Perhaps add the 20px top padding to the header element which is inside the wrapper for non CSS3 browsers.
a. Does your body have to have the height and width assigned? Couldn't you simply set the background. It should automatically span any width non-dependent on the user's screen.
b. You could set the body to position: absolute; left: 0; right: 0; top: 0; overflow: hidden;
This should allow your body to expand in height as needed.
c. You could assign an actual height in pixels, or em . Something like 700px should not go off the screen, but of course that would change if the user is mobile.
How can I set the div #gallery in the center of the div #warp? Here is a demo JS Fiddle.
HTML:
<div id="warp">
<div id="header">
<img id="logo_l" src="images/centerwow-logo.png" alt="Centerwow - Web Design - Logo" />
<img id="Logo_r" src="images/web-design-logo.png" alt="centerwow.com - Portfolio" title="Portfolio" >
<div id="menu">
<li>About Us
<li><a href="#" name="aboutus" title="About Us" >Company Info</a></li>
<li><a href="#" name="profile" title="Profile" > Profile</a></li>
</div>
</div>
<div id="gallery"></div>
</div>
CSS:
html body{
margin:0;
padding:0;
}
body{
background:#F7F7F7;
}
#warp{
position:relative;
margin:0 auto;
}
#header {
position:relative;
background:#DEEAF4;
width:80%;
height: 100px;
margin:0 auto;
}
#logo_l{
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
#Logo_r{
position:absolute;
width:272px ;
height:100px;
right:0;
top:0;
margin:0;
padding:0;
}
#menu li {
display: block;
vertical-align: top;
float:left;
margin: 0 5px;
}
#menu {
position:relative;
width:250px;
top: 35px;
margin: 0 auto;
}
#gallery{
position:absolute;
background:#EBF0F5;
width:80%;
height:70%;
margin:10px auto;
padding:10px;
}
You do not need to include position: absolute to center #gallery. This will already be achieved with margin: 10px auto.
Further, to set a percentage height to #gallery, its parent element must have a specific height. In this case, I assume you want it to be based on viewport height. To do so, every ancestor div must have a height of 100%:
*, html, body, #warp {
height: 100%;
}
JS Fiddle: http://jsfiddle.net/qc9WL/1/
NOTE: I also noticed that there are some bugs in your HTML and CSS.
You need a comma between body and html in line one of your style sheet
You should use <ul> or <ol> tags when making lists
Lastly, don't forget to close your <li> in line six
I'm not sure what you are trying to achieve here - position: absolute on the #gallery is exactly what's causing the problem (that's why margin: 10px auto is not working). If you remove it, the #gallery element will be in the centre.
Also, you could center horizontally an absolutely positioned element of known width by setting left: 50%; and margin-left: -40%; (-40% in this case, because you have the width for #gallery set to 80%)
Since you are specifying gallery width in percentage, why don't you try setting the left and right margin in percentage?
margin: 10px 10%;
places the division at center
I want to know how to center a div with CSS. I googled some stuff & checked on stackoverflow but it was conflicting with my CSS code.
Here's my code (just in case):
body, p, span, div {
font-family: 'Droid Sans', arial, serif;
font-size:12px;
line-height:18px;
color:#6d6d6d; }
.countdown {
padding-top:15px; width: 100%;
height: 68px;
margin:0 auto 0 auto;
bottom:0;
position:absolute;
}
.countdown .countdown_section{
background:url('images/backcountdown.png') no-repeat 1px top;
float:left;
height:100%;
width:54px;
margin:0 5px;
text-align:center;
line-height:6px;
}
.countdown .countdown_amount {
font-size:15px;
color:#ab7100;
text-shadow:0 0.8px #fedd98;
line-height:52px;
font-weight:bold;
text-align: left;
}
.countdown span {
font-size:8px;
color:#999999;
text-transform:uppercase;
line-height:26px;
}
<body>
<div class="countdown clearfix">
</div>
</body>
The following automatically centers the element horizontally:
margin: 0 auto;
You can center a div with a specific width using the following css:
#yourDiv {
width: 400px;
margin: 0 auto;
}
Provided fixed width is set, and you put a proper DOCTYPE,
Do this:
Margin-left: auto;
Margin-right: auto;
Hope this helps
To center a div use:
#content{
margin: 0 auto;
}
<div id="content">This will be centered horizontally</div>
<div style="margin:auto; width: 100px;">lorem</div>
The above answers will work for divs with relative or static positioning. For absolutely positioned elements (like your .countdown element, you'll need to set left: 50% and margin-left: -XXXpx where XXX represents half of the div's width (including padding and border).
(example: http://jsfiddle.net/7dhwG/)
This will center your page it works great.
#yourdiv {
width: width you want px;
margin: 0 auto;
}
You can also center an absolute position div by setting left to 50% and margin-left to -half of the full width in px.
div {
position: absolute;
width: 500px;
left: 50%;
margin-left: -251px;
}
Stop using margin: 0 auto, Cross browser way of doing this is Here I have tested it and it works perfectly on all browsers