I've trouble centering my webpage using the css:
CSS code below:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
position:absolute;
top:202px;
width:560px;
height:224px;
z-index:2;
}
#newsSection {
position:absolute;
left:576px;
top:209px;
width:380px;
height:600px;
z-index:2;
}
HTML:
<body>
<div id="wrapper">
<div id="welcome">
//content here
</div>
<div id="newsSection">
//content here
</div>
</div>
</body>
I can center the webpage except for the #newsSection div.
The reason why I put "left:576px" under #newsSection div is because I want it to place it right next to the #welcome div.(side by side) However, when I shrink my browser size, #newsSection div will move to the left a bit and overlap #welcome div.
If I remove "left:57px", then the #newsSection div will appear right on top of #welcome div...
Please help.
Thanks
This is probably because youre using absolute position on the child divs. Therefore, "the kids will run wild", as in, they don't care that the parent div#wrapper is center.
Some potential code:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
float: left;
width:560px;
height:224px;
}
#newsSection {
float: left;
width:380px;
height:600px;
}
you should use relative positioning, ie, tagname.class {position:relative; top/right:? ;}
To center a webpage you can use this:
.container{
width: 100%;
max-width:80%;
margin: 0 auto;
}
Related
I need a layout like header content and footer.
My requirements are...
The default position of footer Div is at bottom even no content in content Div.
When the content expand of content Div then whole body(including header,footer) need to be expand based on the content Div
I don't need position:fixed for the footer Div....
I already tried some code in my project......
CSS:
body
{
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:block;
}
.container
{
display:table;
width:100%;
height:100%;
}
.header
{
top:0px;
height:75px;
width:100%;
}
.content
{
width:100%;
height:auto;
position: relative;
}
.footer
{
top:5px;
bottom:0px;
height:45px;
overflow:hidden;
width:100%;
}
CODE:
<div>
<div class="header">
Header Div
</div>
<div class="content">
Content Div
</div>
<div class="footer">
Footer Div(Need it,default at bottom position)
</div>
</div>
Any Idea?
Note:I need to run this code in IE also......
add the following style to your body tag or content div element:
div {
min-height: 500px;
height:auto !important;
height: 500px;
}
This works because IE treats "height" how "min-height" is supposed to be treated.
I have a fluid container of 96% width.
I have a box inside this container which also has percentage width.
I can't get the box to center horizontally inside the wrapper. The usual margin:0 auto; isn't working - I guess because it has a percentage width.
<div id="wrapper">
<div class="box">
<img class="scales"... />
</div>
</div>
Here's the css:
#wrapper {
width:98%;
}
.box {
width:40%;
}
.scales {
width:100%;
}
The problem is probably that your image does not look centered as it is likely smaller than the 40% of it's containing div. In any case, there is no reason for margin:0 auto; not to work. Solution to center the image:
.box {
width:40%;
margin:0 auto;
text-align: center;
}
Try like this: DEMO
CSS:
#wrapper {
width:98%;
background-color:#999;
}
.box {
width:40%;
margin:0 auto;
display:block;
background-color:#ccc;
}
.scales {
width:100%;
}
I can't seem to centre align my div(title) which sits inside another div.
HTML
<div class="wrapper">
<div id="header">
<div class="title">Home</div>
</div>
</div>
CSS
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.title {
position:absolute;
width:1000px;
height:140px;
background-color:red;
margin:auto;
}
Remove position: absolute and it works perfectly.
Position: absolute is only necessary when you need very specific placement outside of the normal document flow. In this case, nothing special is needed apart from automatic left and right margins, which you already have.
you are mixing stuff.
Remove position absolute.
or if you want it to be absolute you can do this
.title {
position:absolute;
width:1000px;
height:140px;
left: 50%;
background-color:red;
margin-left:-500px;
}
I have a #slider div with an image. After that, I have a #content div which has text. I have tried position:relative so I think it should come after the previous div, I mean #slider but here it is not coming that way.
What is the problem here? How to overcome it?
HTML
<div id="slider">
<img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
<div id="text">
sample text
</div>
</div>
CSS
#slider {
position:absolute;
left:0;
height:400px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
JSFIDDLE
You have set #slider as absolute, which means that it "is positioned relative to the nearest positioned ancestor" (confusing, right?). Meanwhile, #content div is placed relative, which means "relative to its normal position". So the position of the 2 divs is not related.
You can read about CSS positioning here
If you set both to relative, the divs will be one after the other, as shown here:
#slider {
position:relative;
left:0;
height:400px;
border-style:solid;
border-width:5px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/uorgj4e1/
what about changing the position: relative on your #content #text div to position: absolute
#content #text {
position:absolute;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/CaZY7/12/
then you can use the css properties left and top to position within the #content div
I am designing a webpage that needs to be split into 4 equal DIVs. This would be easy if I didn't also need to overlap text onto two of these DIVs. So, I have decided the best route would be to stack two container DIVs on top of each other, each with a width of 100% and height of 50%. Then, I would split these into two DIV classes, each with a height of 100% width of 50%, thus giving me 2 DIVs per container DIV, which are 2 in number.
My current CSS:
#collectionsTop {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.topRight {
background-color:red;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.topLeft {
background-color:blue;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
#collectionsBottom {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.bottomRight {
background-color:yellow;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.bottomLeft {
background-color:green;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
And my HTML:
<div id="collectionsTop">
<div class="topRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="topLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
<div id="collectionsBottom">
<div class="bottomRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="bottomLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
Apparently, none of the above works in any capacity at all, displaying the images in their full resolution, not floated, and in no way limited by their parent DIVs. I have no idea why. Please help.
You have placed - clear:both in the css of topLeft , topRight elements
idea => clear:both; - No floating elements allowed on the left or the right side of a specified element ,
hence in your case also similar thing is happening,
check this fiddle : http://jsfiddle.net/4q4Jz/
update:
now check the fiddle.. demo
remove all the `clear:both;
and try it.
`