I've been trying and trying to get this to work. But no matter what I try, I can't get this to show up in the center.
I searched stackoverflow. I tried margin: 0 auto; and tried removing floating elements. But nothing seems to work.
I must be missing something simple. I'm not very knowledgeable about CSS. Could you please point it out?
body {
align-content: center;
text-align: center;
background-image: url(images/marble.gif);
margin: 0 auto;
}
#about {
align-content: center;
text-align: center;
width: 700px;
}
#about img {
align-content: center;
text-align: center;
border-right: black thick solid;
border-top: black thick solid;
border-left: black thick solid;
border-bottom: black thick solid;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 3px;
padding-top: 0px;
}
#myPicture p {
align-content: center;
text-align: center;
font-weight: bold;
font-size: 11pt;
}
#myName p {
align-content: center;
text-align: center;
font-weight: bold;
font-size: 24pt;
clear: both;
margin-top: 15px;
}
<div id="about">
<div id="myPicture">
<p> </p>
<p>
<img src="images/profile2.jpg" />
</p>
</div>
<div id="myName">
<p>Dude</p>
</div>
<div id="myTitles">
<div class="myTitleClass">
<p>...
</div>
</div>
You have centered the image and the text inside div#about which is 700px wide, but the div#about itself is not centered. I added background-color: orange; to the div, so you can see what's happening here:
All you have to do is add margin: 0 auto; to div#about and you'll get this:
It's centered now. You can get rid of orange background.
Also I've shorten your CSS, check this:
body {
margin: 0;
}
#about {
width: 700px;
background-color: orange;
margin: 0 auto;
}
#about img {
border: black thick solid;
padding: 0;
margin: 3px;
}
#myPicture p {
text-align: center;
}
#myName p {
text-align: center;
font-weight: bold;
font-size: 24pt;
margin-top: 15px;
}
<div id="about">
<div id="myPicture">
<p> </p>
<p>
<img src="images/profile2.jpg" />
</p>
</div>
<div id="myName">
<p>Dude</p>
</div>
</div>
ADd margin-left:auto and margin-right:auto to your about section
Here is a fiddle
body {
width: 100%;
text-align: center;
background-image: url(images/marble.gif);
margin: 0 auto;
}
#about {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 700px;
}
#about img {
text-align: center;
border-right: black thick solid;
border-top: black thick solid;
border-left: black thick solid;
border-bottom: black thick solid;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 3px;
padding-top: 0px;
}
#myPicture p {
text-align: center;
font-weight: bold;
font-size: 11pt;
}
#myName p {
text-align: center;
font-weight: bold;
font-size: 24pt;
clear: both;
margin-top: 15px;
}
<body>
<div id="about">
<div id="myPicture">
<p> </p>
<p>
<img src="images/profile2.jpg" />
</p>
</div>
<div id="myName">
<p>Dude</p>
</div>
<div id="myTitles">
<div class="myTitleClass">
<p>...
</div>
</div>
</body>
Related
Good morning,
I am having a challenge with centering a flexbox container itself. I have managed to center all 5 elements within the flexbox but cannot actually get the container itself to center horizontally into the middle of the page.
I have watched a tutorial after getting stuck on this and can see my code is the same except for the naming of containers. Timestamp provided for the exact second where you can see their code: https://youtu.be/fJc18fT4T3s?t=542. In their tutorial, the "trend-container" which is my "image-container" is centered whereas mine is not. I have tried using margin: 0 auto; but this does nothing and the container stays on the left side of the page.
I have had to add text-align: center to mine as the text was not aligning.
If anyone can advise what I have done wrong to not allow this flexbox container to center that would be great as I am a bit stumped!
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
Changing display: inline-flex to display: flex and adding margin: 0 auto to the <div class="image-container"> container fixes the center alignment issue for that section of the page.
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
for "image-container" the parent that is "body" is not a flex or grid item. quick fix set: body to be a flex container and "flex-direction to column, then for "image-container" set "align-self: center;" like so:
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
display: flex;
flex-direction: column;
}
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
}
I would like to fill the whole free bottom space (white color) in case of display with a big width (bigger than content) so how to set css3 style to do this?
CSS:
.footer {
background-color: #FFFFFF;
line-height: 20px;
/*border-top: 1px solid #DDDDDD;*/
overflow: hidden;
}
.footer .copyright {
font-family:Lato;
color: #f6f6f6;
padding: 10px 15px;
margin: 15px 3px;
line-height: 20px;
text-align: center;
font-size:0.9em;
font-weight:400;
}
.footer-color-black,
.footer-transparent {
background-color: #595324;
color: #DDDDDD;
text-align:center;
}
https://jsfiddle.net/3re9wbr2/1/
First, adding margin: 0 to the html/body tag will give you this
html,
body {
margin: 0;
}
.footer {
background-color: #FFFFFF;
line-height: 20px;
/*border-top: 1px solid #DDDDDD;*/
overflow: hidden;
}
.footer .copyright {
font-family: Lato;
color: #f6f6f6;
padding: 10px 15px;
margin: 15px 3px;
line-height: 20px;
text-align: center;
font-size: 0.9em;
font-weight: 400;
}
.footer-color-black,
.footer-transparent {
background-color: #595324;
color: #DDDDDD;
text-align: center;
}
<div class="section">
<div class="container">
<div class="title-area">
<div class="gallerygrid">
<h5>content ldosalodaslodlsoalodslaodasol</h5>
<h5>content ldosalodaslodlsoalodslaodasol</h5>
</div>
</div>
</div>
</div>
<footer class="footer footer-big footer-color-black" data-color="black">
<div class="copyright">
©
<script>
document.write(new Date().getFullYear())
</script> · Lorem Ipsum · All Copyright reserved
</div>
</footer>
Second, adding a wrapper using display: flex with a min-width: 100vh and give the .footer flex: 1 will give you this
html,
body {
margin: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.section {
}
.footer {
flex: 1;
background-color: #FFFFFF;
line-height: 20px;
/*border-top: 1px solid #DDDDDD;*/
overflow: hidden;
}
.footer .copyright {
font-family: Lato;
color: #f6f6f6;
padding: 10px 15px;
margin: 15px 3px;
line-height: 20px;
text-align: center;
font-size: 0.9em;
font-weight: 400;
}
.footer-color-black,
.footer-transparent {
background-color: #595324;
color: #DDDDDD;
text-align: center;
}
<div class="wrapper">
<div class="section">
<div class="container">
<div class="title-area">
<div class="gallerygrid">
<h5>content ldosalodaslodlsoalodslaodasol</h5>
<h5>content ldosalodaslodlsoalodslaodasol</h5>
</div>
</div>
</div>
</div>
<footer class="footer footer-big footer-color-black" data-color="black">
<div class="copyright">
©
<script>
document.write(new Date().getFullYear())
</script> · Lorem Ipsum · All Copyright reserved
</div>
</footer>
</div>
Sounds like you want a sticky footer.
Ryan Fait's method works well.
It is a common <h3> but the text appear on the right side of box, not extreme right but almost, something like that
h3:
.....................................................................................................................................................................
text appear here
.....................................................................................................................................................................
html file:
<div class="fifth">
<p>F-Village</p>
<div class="f-t">
<div class="f-t-col" id="f-t-c-photos">
<h2>Photos</h2>
<div class="big-photo">
<img src="./images/photo.jpg">
</div>
<div class="small-photo">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
</div>
</div>
<div class="f-t-col" id="f-t-c-material">
<h2>Material</h2>
<span>
...some text...
</span>
<p>
<img src="./images/history.jpg">
...some text...
</p>
</div>
<div class="f-t-col">
<h2>Words</h2>
<p class="words"><em>"...some text..."</em>
</p>
</div>
</div>
<div class="f-m">
<div class="f-m-l">
<h3>Video</h3> <!--The problem appear here-->
</div>
</div>
</div>
css file:
.fifth{
/* margin-top: 40px; */
width: 100%;
height: 700px;
color: white;
background-image: url('../images/ww-bg.jpg');
margin: auto;
}
.fifth .f-t-col{
color: white;
height: 265px;
width: 27%;
display: inline-block;
margin-left: 57px;
float: left;
}
#f-t-c-photos div{
float: left;
}
#f-t-c-photos .big-photo{
width: 190px;
}
#f-t-c-photos div:last-child{
width: 80px;
}
.f-t{
width: 1102px;
margin-left: 125px;
height: 240px;
border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
margin-bottom: 2px;
height: 55px;
width: 60px;
}
.small-photo img:first-child{
margin-top: 15px;
}
.big-photo img{
width: 165px;
height: 171px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.f-t-middle img{
width: 165px;
height: 170px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.words{
margin-top: 65px;
font-size: 17px;
}
.fifth h2{
color: #2e2e2e;
font-size: 17px;
color: whitesmoke;
padding: 0 0 10px 7px;
background: url('../images/ww-title.png') top right no-repeat;
margin-top: 5px;
height: 8px;
border-left: 3px solid red;
}
#f-t-c-material img{
float: left;
width: 215px;
}
#f-t-c-material span{
font-weight: 800;
font-size: 16px;
color: #00b3ff;
}
.f-m:before{
clear: both;
}
.f-m h3{
color: white;
}
You can align your text like this,
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
If the text is in a div that is floating right or margin right, you could change it to
float: left;
You can visit the site I am working on here.
You can see what I am going for. I want the bottom right box to mimic the top right box in its positioning, but for some reason it refuses to fill the rest its parent div and opts to stack vertically. Even without content the background stops about half way through the box. I have it set to float left (something that shouldn't be necessary as div children should take their parent's width automatically), so I'm guessing there is something actually there but I cannot tell what. I have tried to clear and such but no luck there either. Is there a way to get that bottom right div to actually fill the parent div?
Here is my HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div>
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
And my CSS
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
display: inline-block;
}
.subtitles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
Thanks for any help or advice!
If you change your structure a little, it might help you. Instead of trying to float to divs side by side, you could just join them together kinda like I did with the HTML and css below. I added comments where I changed stuff in the css.
HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p>
<span class="subtitles">Lunch</span>
<span class="hours">Mon-Fri 11-4</span>
</p>
<p>
<span class="subtitles">Dinner</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
<p>
<span class="subtitles">Bar</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
</div>
</div><!--end hours-->
CSS:
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
/***** Removed Display:inline-block *****/
}
.subtitles {
float:left; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
float:right; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
#hours p {clear:both;} /**** Added ****/
All you need to do is to decrease the inner-div size that fits to your #hours div and assign a class to each of the inner div and float them left and right.
Example
<div id="hours">
<div class="left">
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div class="right">
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
CSS:
#hours .left
{
float: left;
}
#hours .right
{
float: right;
}
It will help for sure. Also start using browser`s consoles. They ease your life.
I take it your trying to make the Hours take up the entire box?
If so, add this code to it:
height: 100%;
width: 100%;
padding: 0px;
Use followig. Those which are commented in here, need to remove form your code.
div.container {
/*height: 460px;*/
/*padding: 10px*/
padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
/*inline-block*/
}
Now add following after ending tag of #hours.
<div style="clear:both;"></div>
To make #hours div look nice, use following.
<div id="hours">
<h3 class="titles">Hours</h3>
<dl>
<dt>Lunch</dt>
<dd>Mon-Fri 11-4</dd>
<dt>Dinner</dt>
<dd>Mon-Sat 4-12</dd>
<dt>Bar</dt>
<dd>Mon-Sat 4-12</dd>
</dl>
</div><!--end hours-->
CSS Styles -
#hours dl,
#hours dt,
#hours dd {
margin: 0;
padding: 0;
}
#hours dl {
width: 100%;
float: left;
clear: both;
}
#hours dl dt {
float: left;
clear: left;
width: 45%;
}
#hours dl dd {
float: left;
}
Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.
I can't add picture, sorry.
Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/
This is my css code:
#page
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
background-color: blue;
}
#page > #main
{
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 5px;
margin-top: 20px;
}
#main > #inner
{
margin: 20px;
}
#page-title h1
{
font-size: 24px;
text-align: center;
}
#footer-hotline
{
height: 50px;
background-color: rgb(255,207,0);
border-radius: 5px;
box-shadow: 0px 3px 3px #999999;
margin-top: 20px;
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
#footer-hotline > .part
{
float: left; width: 33%;
margin-left: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part input
{
vertical-align:middle;
}
#footer
{
margin-top: -25px;
height: 100px;
line-height: 25px;
background-color: white;
text-transform: uppercase;
border: 1px solid black;
}
#footer > .link
{
float: left;
border-right: 1px solid #000;
margin-top: 50px;
}
#footer > .link > div
{
margin-left: 5px;
margin-right: 5px;
}
And this is my html code:
<div id="page">
<div id="main">
<div id="inner">
<div id="page-title">
<img src="myLogo.png" alt="Schulz logo" />
<h1>Some title</h1>
</div>
<div id="content">RenderBody</div>
</div>
<div class="f-c"></div>
</div>
<div id="footer-hotline">
<div class="part">Hotline: 0800/888 888</div>
<div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div>
<div class="f-c"></div>
<div id="footer">
<div class="link"><div>GTC</div></div>
<div class="link"><div>About</div></div>
<div class="link"><div>Help</div></div>
<div class="link"><div>Language</div></div>
</div>
Thanx for answers, suggestions and comments.
See http://jsfiddle.net/wqBEf/1/ for an update.
Noteworthy changes.
I added left align-left and right align-right classes set for float and for text alignment, respectively.
I set your links to display: inline because it is the easiest way to center a list of items horizontally.
Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.
You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7
You also need to implement float:right, direction:rtl, and margin-right:
#footer-hotline > .part
{
float: right; width: 33%;
direction: rtl;
margin-right: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part:first-child
{
direction: ltr;
float: left;
margin-left: 20px;
}
Eli Gassert's answer should suffice for centering the nav
Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show