This is the HTML layout:
<div class="wrap">
<div id="container">
<div id="left">...</div>
<div id="right">...</div>
</div>
</div>
I used the float: left to the left div, and float: right to the right div. Then, I used the padding-top: 10px to the container. Why doesn't it work? thank you.
This is my first style:
.wrap {
float: left;
width: 1000px
}
#container{
background-color: #FFFFFF;
padding: 10px 10px 0;
width: 980px;
float: left;
}
#left {
float: left;
width: 670px;
}
#right {
float: right;
width: 300px;
}
Example here.
When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. You could use margin-top: 10px; on both of your inner divs.
Put right floated div just before the float left div
Instead of using float, use flex and justify the contents to be space-between
#container{
background-color: #FFFFFF;
padding: 10px 10px 0;
width: 980px;
display: flex;
justify-contents: space-between;
}
Related
I have the following html (minimal) template:
<body>
<div class="container">
<div class="top"><img src="img/hyphen_top.png" width="177" height="150"/></div>
<div class="bottom"><img src="img/hyphen_bottom.png" width="117" height="6"/></div>
</div>
</body>
Using only css, I want to align "top" div in the middle of the page/scree and "bottom" div under the "top" div with a margin top 100px. I can`t center top/bottom and also the images in the main container("container").
Thanks!
Try this:
.container {
text-align:center;
}
.bottom {
margin-top: 100px;
}
jsfiddle here: http://jsfiddle.net/5xTLh/
Here's a Fiddle
.container {
width: 600px;
margin: 20px auto;
border: 1px solid #333;
}
.top {
width: 300px;
margin: 20px auto;
text-align: center;
}
.bottom {
width: 300px;
margin: 100px auto 0;
text-align: center;
}
For some reason, the bottom section of my layout doesn't seem to be centered when I have set the left and right margin to auto
http://codepen.io/anon/pen/kvtcp
Please see the example.
I have since changed the code with some example you have provide but I have another issue. The bottom div has pushed up to left and right section div?
I have used margin-top 20px and nothing happens
Regards
Just remove:
float:left
from the .bottomsection class
and add
clear:both;
instead...
This is occuring because you have the div set to float left and the screen is the left edge.
Your divs above have margin left to pad them in.
I would suggest center your container.
http://codepen.io/anon/pen/sHvCA
body{
background:#90F;
}
#container {
width: 1000px;
height: 1200px;
padding-top: 25px;
overflow: auto;
margin:0 auto;
}
.header {
width: 800px;
height: 100px;
}
.leftimage {
float: left;
}
.middle {
height: 200px;
background:#FFF;
width: 800px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.leftsection {
width: 300px;
background-color: #FFF;
height: 400px;
margin-top: 10px;
float: left;
margin-left: 100px;
}
.rightsection {
background-color: #0F0;
height: 400px;
width: 479px;
float: left;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 20px;
}
.bottomsection {
clear:both;
height: 200px;
background: #FFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
That is because you have float:left; on it. Remove that, and add clear:both; instead.
I would recommend wrapping the left and right floated divs in another div, and apply overflow:hidden on the outer div for better control.
Ok,
remove the float from your bottom div.
.bottomsection {
height: 200px;
background: #FFF;
width: 800px;
/*float: left;*/
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
And in your HTML you have to clear the floats with i.e
<div class="leftsection"></div>
<div class="rightsection"></div>
<div style="clear:both;"></div>
<div class="bottomsection"></div>
This is a quick and dirty solution.
Here is a good link i.e. about floating div´s
http://css-tricks.com/all-about-floats/
It is floating for no reason and this causes showing up on the left side. Remove that. This time it should be fine, but you won't be able to see it because it has nothing in it. Add overflow:hidden; to avoid this. Then you might want to give some margin as well. And please keep in mind, use floats wise, not every problem requires float.
So im feeling pretty stupid that I can't figure this out but my problem is as following:
I got a footer and inside the footer I have 2 divs, 1 containing a Facebook image and 1 containing copyright text. What I want to do is float them next to each other, but align the Facebook image to the left and the text to the center.
Html:
<div id="footer">
<div id="facebook"><img src="img/FB-f-Logo__blue_29.png" alt="facebook link"></div>
<div id="footerText"><p>© Copyright 2013. All Rights reserved.</p></div>
</div>
Css:
#footer {
width: 960px;
height: 50px;
margin: 0 auto;
}
#facebook {
width: 29px;
height: 29px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
#footerText {
float:left;
font-size: 11px;
text-align: center;
margin: 20px auto 20px auto;
}
You could give both divs an additional "wrapper" within the footer: http://jsfiddle.net/y9xpA/
#wrap {width: 400px; margin: auto;}
Your text in #footerText will not be centered because #footerText doesn't have a specified width. Its width is currently auto, which is default, so it will shrink to the width of the text inside; neither text-align:center or automatic side margins will fix this, as I can see you've tried.
If you want #facebook floating all the way to the left of the footer, you can give the remaining width of the footer to #footerText:
#footerText {
float:left;
font-size: 11px;
text-align: center;
width: 931px;
margin: 20px 0;
}
You can try using absolute position to move the Facebook div out of the flow of the page and to the left, then giving the footer text a left margin equal to the facebook div's width and centering it:
#footer {
width: 960px;
height: 50px;
position: relative;
}
#facebook {
width: 29px;
height: 29px;
position: absolute;
left: 0;
}
#footerText {
font-size: 11px;
text-align: center;
margin: 20px auto 20px 29px;
}
Demo
It'd be much, much easier to just give the #footer a text-align:center and set the other elements inside it to display:inline. Check out a demo: http://jsfiddle.net/pUKwJ/
#facebook:
{
display: inline-block;
text-align: center;
}
#footer-text
{
display: inline-block;
text-align: center;
vertical-align: center;
}
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/
I have my HTML like this
<div id="wrapper">
<div id="main">
<p>test</p>
</div>
<div id="sidebar">
<p>test</p>
</div>
</div>
And CSS
#wrapper {
width: 960px;
margin: 0px auto;
}
#main {
width: 790px;
display: inline-block;
padding: 0px;
margin: 0px;
}
#sidebar {
width: 170px;
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
Example: http://jsfiddle.net/Hpwff/
The problem is that even though the sum of both divs is 960px, which is the same width as the parent container's (#wrapper), they do not float next to each other. I have to shrink either the sidebar or main containers width back by 4px so they fit. Why is this, and is there a way around it?
You have a newline between the two divs; since they are inline-block, the newline between them is rendered as a space. Without space it works as you expect.
Add float: left; to each div and it works like it should! updated jsFiddle
Updated code:
#wrapper {
width: 960px;
margin: 0px auto;
}
#main {
width: 790px;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
#sidebar {
width: 170px;
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
float: left;
}
Look this: jsfiddle. You need to add float: left to your main and sidebar blocks. And add clear block after them.
<div id="wrapper">
<div id="main">
<p>test</p>
</div><div id="sidebar">
<p>test</p>
</div>
</div>
No space between </div> and <div>
This is one of the older tricks - you need to set the font size of the wrapping container (#wrapper) to 0px and then each of the children to whatever the font size you require.
This trick works on almost all browsers. However, this time it is not IE, but rather Safari that is failing to acknowledge the setup.
So the code should look like this:
#wrapper {
width: 960px;
margin: 0px auto;
font-size:0px;
}
#main {
width: 790px;
display: inline-block;
padding: 0px;
margin: 0px;
font-size:16px;
}
#sidebar {
width: 170px;
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
font-size:16px;
}
You can test it on your already created jsfiddle, it works well.