I'm trying to center the middle paragraph in an HTML footer with no success. I used a layout of floats: the first paragraph float to the left, the third paragraph float to the right and the second (middle) paragraph gets margin 0 auto. I also specified the width of each paragraph to 250px. Can someone explain me what I'm doing wrong?
footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}
<footer class="footer">
<div class="footer-content">
<div class="footerServices">
<h5>Services</h5>
<p>
first paragraph
</p>
</div>
<div class="footerContact">
<h5>Contact Us</h5>
<p>
second paragraph
</p>
</div>
<div class="footerNewsLetter">
<h5>Sign To Newsletter</h5>
<p>
third paragraph
</p>
</div>
</div>
</footer>
Just add text-align:center to the .footer-content div:
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}
footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}
.footer-content .footerServices,.footer-content .footerNewsLetter,.footer-content .footerContact{
text-align:left;
}
<footer class="footer">
<div class="footer-content">
<div class="footerServices">
<h5>Services</h5>
<p>
first paragraph
</p>
</div>
<div class="footerContact">
<h5>Contact Us</h5>
<p>
second paragraph
</p>
</div>
<div class="footerNewsLetter">
<h5>Sign To Newsletter</h5>
<p>
third paragraph
</p>
</div>
</div>
</footer>
In order for margin: auto to work, you need to set your middle paragraph to display:block
You have some conceptual errors, first of all, you set display:inline-block for all .footer-content > div and then apply float to first and third.
Please, look at this mine question and relative answer that define a scenario very similar to yours. 2 opposite columns left and right, and a central one that adapt its width to remaining space.
As #j08691 said add text-align:center; also add float:none;
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;text-align:center; float:none;
}
Did you try floating all divs to the left?This way they are going to stack up horizontally next to each other.
Then, you can play around with margins to center the one you want in the middle.
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 5 years ago.
Hi I have the below HTML, Inside the Container I have Header, section and div.
With my current CSS below the div with class rightSideDiv does not show to right to the section element.
.container {
height: 500px;
widht: 500px;
background-color: red;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.
Apply float: left; to both containers, use width: 50%; instead of px and display: block; header
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:50%;
height:200px;
background-color: yellow;
float: left;
}
.rightSideDiv {
width:50%;
height:200px;
background-color: pink;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Change the H2 to display: block;, and then add float:left; to both boxes.
When you want divs side-by-side through floating, float them the same direction.
rightSideDiv is 8 pixels taller than the other. That is because the 4px border is added on top of the height. Consider using box-sizing: border-box;, which makes the border get absorbed into the set height, instead of being added on top of it.
.container {
height: 500px;
width: 600px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
display: inline-block;
float: left;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
display: inline-block;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Try using flexbox and display:flex instead. With very few changes to css you can get something like this: https://jsfiddle.net/vnuz47va/2/
.container {
height: 500px;
width: 520px;
background-color: red;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
width:100%;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
change your css with this :
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
float : left;
width: 50%;
height:200px;
background-color: yellow;
}
.rightSideDiv {
float : right;
width:50%;
height:200px;
border: 4px solid green;
}
you can use float right and left to align your div, however your container has a width to 400 and your 2 div are 249+249 = 498 so there is a problem here..
Here is the problem: I tried to create a page by putting two "p" elements aligned on the same line using display: inline-block in the "p" and the last child with float: right. The code worked fine in Chrome but when I tried it in Edge I noticed a small problem: the footer is not at the bottom of the page as it should be, but creates an empty space of at least 1px.
Page view in Google Chrome: https://i.stack.imgur.com/qfCkl.png
Page view in Microsoft Edge: https://i.stack.imgur.com/bFHz1.png
But if I change the background color of the body to the same as the footer the margin "disappears".
The problem is that I do not want to change the color of the body nor use position: absolute to put the footer down because I tried to fix it that way and it worked but I do not want to use that property. I do not know if it is an Edge display problem or if you guys could tell me if the code is wrong. Here is the code:
<html>
<body>
<div class="wrapper">
<div class="content">
<!-- content of the page -->
</div>
</div>
<footer>
<div class="copyright">
<p>Footer text</p>
<p>More Footer text</p>
</div>
</footer>
</body>
</html>
And this is the CSS:
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: Sans-Serif;
}
.wrapper, footer {
width: 100%;
}
.content {
margin: 0 auto;
height: 1000px;
width: 90%;
}
footer {
background-color: #333;
}
.copyright {
padding: 20px;
}
.copyright p {
color: #fff;
display: inline-block;
padding: 0px 20px;
}
.copyright p:last-child {
float: right;
}
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: Sans-Serif;
}
.wrapper, footer {
width: 100%;
}
.content {
margin: 0 auto;
height: 1000px;
width: 90%;
}
footer {
background-color: #333;
}
.copyright {
padding: 20px;
}
.copyright p {
color: #fff;
display: inline-block;
vertical-align: middle;
padding: 0px 20px;
}
.copyright p:last-child {
float: right;
}
<div class="wrapper">
<div class="content">
<!-- content of the page -->
</div>
</div>
<footer>
<div class="copyright">
<p>Footer text</p>
<p>More Footer text</p>
</div>
</footer>
Please add vertical-align: middle; to .copyright p
Here's a JSfiddle of my problem https://jsfiddle.net/d20fo54o/
The space below the h3 tag will not go away. I've tried making padding 0, margin 0, and looking it up.
It's not the div under it either, because if you delete the other div and replace it with anything else the space is still there.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
Adding h3, p { margin: 0 }. Working just fine, see fiddle
https://jsfiddle.net/d20fo54o/1/
add margin:0; for both p and h3
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
h3, p{
margin:0;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
In chrome dev tools you can see how margins (the peach coloured bits) affect the overall page.
In this picture, we can see h3#title has a margin-bottom (because it's a margin at the bottom) that is going over the blue bit, so we can say.
h3#title {
margin-bottom: 0px;
}
That will remove the bit below the title Hello, but there is another margin (margin-top this time, because it's a margin on top) that looks to affect that area, this time it's p that is causing the issue so again we can do something like.
p {
margin-top: 0px;
}
Putting it all together
Now let's put these little bits of code we've worked out into your CSS.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
/* our new code */
h3#title {
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
And there we go, the pesky margins are gone and so is the extra spacing.
Hope this helps.
if you go and reduce the width of the window to view the screen as if it were a mobile device you can see that the orange "badges" may not be entered (especially when only one badge fits per line) I want it to fit more badges in if possible whilst always keeping the badge, or group of badges on that line entered horizontally. The class is badge that isn't being centered Thank you in advance!! :)
jsfiddle: http://jsfiddle.net/avg24wrk/
This is the HTML
<div class="container">
<div class="sidebar">
<div class="sidebar-inner">
<p class="badge"><span class="vertical-align">Book a Free Consultation!</span></p>
<p class="badge"><span class="vertical-align">Second Point</span></p>
<p class="badge"><span class="vertical-align">Third Point</span></p>
</div>
</div>
and this is the CSS
* {
border: 0;
margin: 0;
padding: 0;
}
.sidebar {
float: left;
width: 25%;
color: #505050;
}
.sidebar-inner {
margin: 0 30px 0 35px;
}
.badge {
margin: 10px auto;
font-size: 24px;
text-align: center;
border-radius: 7px;
padding: 20px 20px;
background-color: #ed9727;
cursor: pointer;
}
#media screen and (max-width: 490px) {
.sidebar {
width: 100%;
}
.sidebar-inner {
padding-bottom: 20px;
border-bottom: 2px solid #505050;
margin: 0 30px;
overflow: hidden;
}
.badge {
float: left;
margin: 15px 10px;
max-width: 150px;
min-height: 50px;
display: table;
}
}
have you tried adding text-align: center; to class you want to center
since i you didn't mention which class you want to center so i will give you a simple rule try this
please mention class you want to center
I want the div "nav" to be floated right and display its divs inline. Also when I resize the browser I want "nav" to slide under "logo" and do so not having divs left on the same line as the logo while other underneath the logo.
Here is the HTML:
<div id="header-container">
<div id="header-wrap">
<div class="left logo logoimg">
<img src="images/Logo-Robert_Fikes_IV.png"/>
</div>
<div class="right nav">
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
</div>
</div>
</div>
and CSS:
body {
background: #000000;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
img {
max-width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
#header-container{
margin: auto;
padding: 80px 0px 0px;
max-width: 1160px;
width: 100%;
height: 200px;
}
#header-wrap{
padding: 0px 40px 0px;
max-height: 100%;
}
.logo{
max-width: 440px;
width: 100%;
}
.logoimg{
}
.nav{
margin-top: 20px;
}
.bluebutton{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 8px 8px;
margin: 0px 0px 0px 5px;
}
http://jsfiddle.net/wse63zzk/
Done. I changed the nav divs to li elements, and of course the parent div to a ul. This is really how you should be making navigation menus for semantic HTML.
Then I just added the following CSS:
.nav {
margin-top: 20px;
list-style-type:none;
}
.right.nav li {
float:right;
}
Fiddle