So I've been having trouble horizontal centering two images in a div called content-pic. I've tried the solutions found here How to vertically center image inside div and here How to vertically center image inside div the solutions didn't seem to work for my problem specifically. My question is how do horizontal center images via css in my div content below header? I is there a property that I'm missing or am i just going to have to mess around with padding/margin until they look right?
html
<body>
<div id="wrapper">
<div id="header">
<div id="mast"><img src="http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png" height="99" width="774=" /></div>
<div id="below-mast">
<!--Start of below mast -->
<img class="nav" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="226" border="0" alt="Crusader Army" />
<img class="Guy" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="549" border="0" alt="Crusader Army" />
</div>
<!--end of below mast -->
</div>
<!--end header -->
<div id="content">
<!--Start of content -->
<img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
<img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
</div>
<!--End of content -->
<div id="footer">
<ul>
<li>Home</li>
<li>What is a 1031 Exchange?</li>
<li><a href="exchangeRequ.html">
1031 Exchange Requirements</a>
</li>
<li>Types of Exchanges</li>
<li>How to get Started</li>
<li>Why CLX?</li>
<li>Resources</li>
<li>FAQs</li>
<li>Fees</li>
<li>Contact Us</li>
</ul>
</div>
<!--end of footer -->
</div>
<!--End of Wrapper -->
CSS
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto; /* use shorthand */
width: 774px;
}
#content {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: green;
}
ul {
list-style: none;
margin: 20px auto;
width: 600px;
}
dd {
margin-left: 6em;
}
.nav{float: left;}
.Guy{width:500px;
margin-left: 30px;
}
.content-pic{}
.we-pay {
font-size: 13px
}
.note{
text-align:center;
}
.disclaimer {
font-size: 13px;
text-align: center;
font-weight: bold;
font-style: italic;
}
.FAQ{
font-size:14px;
}
.FAQ li{
margin:20px 0px 20px 0px;
}
.Question{
font-weight:bold;
}
#footer {
clear:both;
text-align:center;
margin-top:300px;/* The margin is so large becuase it is cleared and need to be larger much large than content */
}
#footer li {
display: inline;
border-left: 2px solid #000;
padding: 0 3px 0 3px;
}
#footer li:first-child {
border: none;
}
#footer a {
font-family: Helvetica, sans-serif;
color: #300000;
}
Here is my code on code pen for you convenience http://codepen.io/Austin-Davis/full/fJLEn.
just remove the float: left; attribute from the content div. It will center the images.
Tell me if it is not what you want.
you should remove float:left from #content div
#content {
/*float: left;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: green;
}
Remove float:left and it'll work fine
I dont see a div called content_pic so I assume you want to center the div with id #content that has the img.content_pic in it.
Since its parent has a fixed width you could use the same technique you are using to center the wrapper:
#content {
margin: 0 auto;
}
Based on your edit I now understand that you want to center the images inside the div #content. Well since that div does not have a set width, it is shrink wrapping your images. It doenst have room to justify your images horizontally.
You will need to set the width of the content div to be that of the wrapper and then center its contents, or you will have to give it a set width that is smaller than the wrapper and then use the technique I originally described.
Related
I know this is a common problem, but I can't get my header the same size like my screen.
I already tried to wrap the header into another div and make width: 100%. This didn't help.
Thanks for your help!
body {
font-family: 'avenirregular';
padding: 0;
margin: 0;
background-color: #f4f4f4;
width: 100%
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
/* Header **/
header {
background: #16205E;
color: #ffffff;
padding-top: 30px;
min-height: 7.5vh;
border-bottom: #2B8AFF 3px solid;
display: table-cell;
vertical-align: middle;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
vertical-align: top;
padding: 0 20px 0 20px;
}
header #branding {
width: 20%;
float: left;
padding-top: 0px;
padding-bottom: 20px;
}
header #home img {
width: 100%;
height: 100%;
}
header nav {
float: right;
margin-top: 20px;
}
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
Just remove the display:table-cell from the header
body{
font-family: 'avenirregular';
padding:0;
margin:0;
background-color:#f4f4f4;
width:100%
}
/* Global */
.container{
width:85%;
margin:auto;
overflow:hidden;
}
/* Header **/
header{
background:#16205E;
color:#ffffff;
padding-top:30px;
min-height:7.5vh;
border-bottom:#2B8AFF 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
vertical-align:top;
padding: 0 20px 0 20px;
}
header #branding{
width:20%;
float:left;
padding-top:0px;
padding-bottom:20px;
}
header #home img{
width:100%;
height:100%;
}
header nav{
float:right;
margin-top:20px;
}
<body>
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
</body>
I have a good convention for you to follow which I have designed for myself and it works pretty well. Look Below.
Side-Note: I would remove the UL list. And just use links straight up then you can use CSS to style your menu links. it will make your life easier.
Every page must have a wrapper div to wrap all of your html.
Then inside your wrapper you can manage your content. But your wrapper must always have a width of 100%, and your box-width will will never be full width, the name explains it's purpose. This standard allows you to control your pages full width content such as banner or whatever you may want full width at any level on the page. And then if you have something like text content you use the box-width style class to center you content.
The way in which I have left the code for you will also take mobile into consideration, responsive design is important. But you can optimize it however you feel. :)
To get all your elements inline, investigate these functionalities based on what works best for you.
https://www.w3schools.com/css/css_inline-block.asp ->inline-block
and
https://www.w3schools.com/css/css_float.asp ->float
Then apply the appropriate style to your div elements inside the surrounding div.
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
#media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
#media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
header{
display:inline-block;
width:100%;
}
You have display: table-cell; that means it baheve like table cell... and table cells are content related. You can just remove it and then your header will be display:block that means its automaticly 100%. Retrospectively my answer is not as good as the other one here... so just remove display:table-cell.
I am failing miserably at getting my layout to behave properly with a two column-div layout
There is a content wrapper, then a navigation menu on the left and main content on the right.
For some reason the main content is centering based on the content-wrapper, and not on its own width. I'm not sure how to get the main-content to center within itself.
HTML:
<body>
<div id="wrapper">
<!-- #BeginLibraryItem "/Library/header.lbi" -->
<div id="header"></div>
<!-- END HEADER -->
<!-- #EndLibraryItem -->
<div class="clear"></div>
<div id="content-wrapper">
<!-- #BeginLibraryItem "/Library/navigation.lbi" -->
<div id="navigation">
<p class="Home-Page-L_Panel"><img src="http://twitter-badges.s3.amazonaws.com/follow_bird_us-b.png" alt="Follow kosherCruises on Twitter"></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Passover10">Passover</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#KCruises">Kosher Cruises</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Sukkot">Sukkot</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#GKTours">Kosher Tours</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#JHTours">Heritage Tours</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="links/Interesting-Links.htm">Links</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="Contact.htm">Contact Us</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="index.htm">Home</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Candle">Candle Lighting</a></p>
<div><img src="OTBGifs/el_al_whitebkgrd-100W.jpg" alt="El Al It's not just an airline. It's Israel." width="100" height="24" border="0"></div>
<div align="left"><img src="Travelex_Images/Linking Graphic_small.GIF" alt="Travelex Insurance" width="100" height="66" border="0"></div>
<p>Time in Jerusalem</p>
<div align="left">
<iframe src="http://free.timeanddate.com/clock/i1q3n65d/n676/fn5/tcddd/ahl/bas5/bat6/baceee/pa2" frameborder="0" width="103" height="33"></iframe>
</div>
<div><img src="http://www.judaicawebstore.com/AffiliatePro/scripts/imp.php?a_aid=5547af81c16e2&a_bid=3d5614ac" width="1" height="1" alt="" /></div>
<object width="120" height="600">
<param name="movie" value="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac">
<param name="menu" value="false"/>
<param name="quality" value="medium"/>
<param name="wmode" value="Opaque"/>
<embed src="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac" width="120" height="600" loop="false" menu="false" swliveconnect="FALSE" wmode="Opaque" allowscriptaccess="always">
</object>
</div>
<!-- END NAVIGATION -->
<!-- #EndLibraryItem -->
<div id="main-content">
<h1>The Site for Kosher Travel</h1>
</div><!-- END MAIN-CONTENT -->
</div><!-- END CONTENT-WRAPPER -->
<!-- <div class="clear"></div> -->
<div id="footer">
</div><!-- END FOOTER -->
</div><!-- END WRAPPER -->
</body>
STYLES:
/* CSS Document */
body {
background-image:url(OTBGifs/116a8b.GIF);
}
/* unvisited link */
a:link {
color: #000099;
}
/* visited link */
a:visited {
color: #000099;
}
/* mouse over link */
a:hover {
}
/* selected link */
a:active {
color: #0000FF;
}
h1, h2, h3, h4, h5, h6, p
{
font-family: Times New Roman, Times, serif;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
p {
font-size: 16px;
}
#wrapper {
width: 740px;
margin-left: auto;
margin-right: auto;
background-color:#848484;
}
#navigation {
width: 132px;
display: inline-block;
margin-top: 0px;
vertical-align: top;
background-color: #ffffff;
}
.clear {
clear: both;
margin:0px;
}
.Home-Page-L_Panel
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
font-style: italic;
}
a.Home-Page-L_Panel
{
text-decoration: none;
}
#header {
width: 100%;
height: 113px;
background-color: #6699FF;
}
#main-content {
vertical-align: top;
margin-left: 132px;
display: inline-block;
}
#content-wrapper {
margin-top: 0px;
}
Any help would be appreciated.
Image of current layout showing how the "The Site for Kosher Travel" is not properly centered within its div:
I would suggest using text-align: center within the #main-content. I only see it within your h1.
I'm assuming you want the left nav to use 132pixels in width, and the main-content nav to use the remaining screen width. You need to float your nav container to the left, then for the main-content div, set it to display: block and give it left-margin equal to the width of the left nav:
#navigation {
width: 132px;
display: inline-block;
margin-top: 0px;
vertical-align: top;
float: left; <----------- here
}
#main-content {
vertical-align: top;
display: block; <------- here
margin-left: 132px <------- and here, increase this to add space between the two columns
}
To ensure that any content after #content-wrapper renders beneath the whole thing, add a clearfix to your CSS:
#content-wrapper:after {
content: "";
display: block;
clear: both;
}
Example:
https://jsfiddle.net/bcoom7rn/1/
I see your full code and see that you have few fundamental issue with the way you have written your layout.
Things you can do:
Use width for #main-content
Use float layout
1 Update CSS for #main-content
#main-content {
vertical-align: top;
display: inline-block;
width:604px;
}
Notice, I have removed margin-left. See here: http://jsfiddle.net/tg68m6mp/
2 Use floats layout. (Good, old way)
Use float on both #navigation and #main-content, also give width and use clearfix div which you already have. See here: http://jsfiddle.net/56bnk5s4/
try this....
#main-content { width: calc(100% - 136px);margin-left: auto; };
h1 { text-align: center; } /* this h1 is inside main-content div*/
Actually, h1 is NOT centering based on the #content-wrapper. It just happens that your container size made it SEEM like it's in the center of the #content-wrapper.
Apply these styles to #main-content:
right: 132px;
left: 0;
top: 0;
bottom: 0;
position: absolute;
Apply these styles to #content-wrapper:
position: relative;
Remove these styles from #main-content:
margin-left: 132px;
Hope that helps!
So I have this CSS box:
.navigation-div
{
text-align:right;
margin-top:14px;
box-shadow:0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color:#E3E3E3;
background-color: #333;
}
With an image and a piece of text inside of it
#mailtext
{
margin-top:-10px;
display:inline-block;
font-size:20px;
color:white;
font-style:italic;
}
#mailpicture
{
display:inline-block;
margin-top:16px;
}
This is the HTML I have for it:
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Mail Us</h1>
<img id="mailpicture" src="images/gmail.png">
</nav>
</div>
Currently there is no styling for the class navigation. The Mail picture is in the correct position, but the text I want to go upwards. As you can see from the #mailtext styling I have margin-top:-10px; This does not move the text upwards.
How would I move this text upwards with or without using margin-top.
This question is like my previous question in a way, but now the text will not go to where I want it to (upwards). Using margin-left is bad, but when I did that I could move the margin top also. Since the navigation-div has a text align of right, this might be messing it up.
How would I keep the text in the same position with moving the margin top without using margin left. I would like to keep the text on the same line with the image, not above. The picture is in the right place, all i want to move is the text higher. I want the text to be parallel to the center of the image on the same line.
The previous question I have posted was about keeping all the elements on the same line, this one is about moving the margin-top.
To align the text a little higher you need to replace margin-top with position: relative and top:-10px, like in the code snippet and fiddle.
For a more efficient solution i recommend using the CSS property vertical-align. In this case if the image(size) is changed, it will still align with the text.
JSFiddle
.navigation-div {
text-align: right;
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
#mailtext {
position: relative;
top: -10px;
display: inline-block;
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture {
display: inline-block;
margin-top: 16px;
}
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="images/gmail.png">
</a>
</nav>
</div>
Edit:
.navigation {
margin-top:14px;
box-shadow:0px 0px 10px rgba(0, 0, 0, 0.47);
padding: 0;
color:#E3E3E3;
background-color: #333;
width: 100%;
height: 100px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
float: right;
line-height: 0.5;
text-align: center;
margin-right: 20px;
}
#mailtext {
align-self: center;
font-size: 20px;
color: white;
font-style: italic;
margin-right: 15px;
}
#mailpicture {
align-self: center;
}
<nav class="navigation">
<div class="container">
<h1 id="mailtext">Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="images/gmail.png">
</a>
</div>
</nav>
JS Fiddle
There are issues with inline-block elements, especially when one is a block element and the other is an inline element. What I'd do is set parent font-size to 0 and come back to the H1 element to set the desired font-size. Then, I'd set vertical alignment to middle.
Mention: setting an id to the image element doesn't work, IMHO, without working with the link that contains it. They're both inline elements and one has to include the other, acting like a block, right?
Check the code, its a bit simplified, but you will definitely work it out.
.navigation-div {
background: #333;
color: #fff;
font-size: 0;
text-align: right;
}
#mailtext {
font-size: 20px;
margin-right: 5px;
}
.navigation a,
#mailtext {
display: inline-block;
vertical-align: middle;
}
#mailpicture {
display: block;
}
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Mail Us</h1>
<img id="mailpicture" src="images/gmail.png">
</nav>
</div>
I don't know how big your logo will be, but here is an approach that is relatively clean.
For the two inline-block elements, #mailtext and #mailpicture, set vertical-align: middle.
For #mailtext, zero-out the default margins from the h1 tag.
For #mailpicture, adjust the left and right margins as need to get horizontal white space suitable with your design. and then set the top and bottom margin accordingly.
The vertical-align property will keep the two elements centered with respect to each other.
However, if your image is such that the visual center of the image is not at the mid-height of the image, you can add position: relative to #mailtext and adjust the top or bottom offset (use one or the other).
If your image height is actually less than the height of the text, apply the position-relative adjustment to the image instead of the text.
.navigation-div {
text-align: right;
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
#mailtext {
display: inline-block;
vertical-align: middle;
margin: 0; /* zero out h1 margins */
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture {
display: inline-block;
margin: 10px; /*adjust as needed */
vertical-align: middle;
}
.ex2 #mailtext {
font-size: 2.5em;
margin: 10px 0;
}
.tweak #mailpicture {
position: relative;
bottom: 5px; /* use top if you want to move the image downward */
}
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Large Logo - Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="http://placehold.it/100x50">
</a>
</nav>
</div>
<div class="navigation-div ex2">
<nav class="navigation">
<h1 id="mailtext">Small Logo - Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="http://placehold.it/100x10">
</a>
</nav>
</div>
<div class="navigation-div ex2 tweak">
<nav class="navigation">
<h1 id="mailtext">Position Tweak - Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="http://placehold.it/100x10">
</a>
</nav>
</div>
What's the best way to align my arrow graphic in the middle and also touching the bottom of the bar above?
Right now it's aligned to the left and there is space between the top bar and the arrow.
See my jsfiddle: http://jsfiddle.net/huskydawgs/Z7dZR/26/
Here's my HTML
<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
</div>
<!-- End Form -->
Here's my CSS:
/* 2 Column */
.wrapper-twocol {
position:relative;
width:100%;
border: none;
margin: 20px 0 37px 0;
}
.twocol_row {
height:100%;
white-space:nowrap;
}
.twocol_cell1, .twocol_cell2 {
height:100%;
width:47%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 6%;
}
.twocol_cell1{
margin-left: 0;
}
.form-header {
background:#939598;
margin:0;
padding: 10px 0 10px 0;
color: #fff;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 21px;
text-align: center;
}
.form-arrow {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Change you styling slightly. Your div is the entire width of it's parent so you just need to center align that divs contents.
DEMO http://jsfiddle.net/Z7dZR/27/
.form-arrow {
margin: 0 auto;
text-align: center;
margin-top: -2px;
}
I'd suggest the following solution.
First, wrap arrows within a wrapper-div:
<div class="wrapper arrowWrapper">
<div class="form-arrow">
<img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12">
</div>
</div>
Second, apply following CSS:
.arrowWrapper {
width:209px; /*It's the width of the buttons calculated by the developer tools*/
}
.form-arrow {
margin:-3px auto 0 auto;
width:11px; /*width of the arrow*/
}
You can do it with css only (removing the arrow image and its wrappers from the markup)
using the ::after selector. That's how you will prevent repeating of the tag and the wrappers.
.form-header::after{
content: url('https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif');
position: absolute;
left: 50%;
bottom:-18px;
}
Here is the Demo: http://jsfiddle.net/7H5ea/1/
I think I'm going insane over this now, no idea how to resolve it... please help guys.
I have three divs on a page that should all fit onto one line. They have to be square (with rounded corners) so I have to set a width and a height to keep the 1:1 aspect ratio. I have a heading inside them that should be vertically and horizontally centered. The wording of the heading may change and might run over 2 lines so a simple margin-top is not enough in this case.
First problem: there are weird margins at the top despite there not being anything else affecting that (well there must be but I can't see what). If I float the divs they line up but floating isn't the way to go is it... why is inline-block not working?
Second issue (which is likely related, so I'm posting it in one go) is that I'm unable to vertically center the title divs. Any ideas?
Here's a jsfiddle to illustrate: http://jsfiddle.net/fydC4/
The HTML:
<div id="container">
<div class="nav-left">
<p id="nav-left-title">In this section…</p>
<ul>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
</ul>
</div>
<div id="main">
<h1>Assignments</h1>
<p>Click on the titles of the assignments to find out more.</p>
<div class="box" id="good-designs">
<h2 class="box">3 good designs</h2>
</div>
<div class="box" id="temp">
<h2 class="box">title here</h2>
</div>
<div class="box" id="temp2">
<h2 class="box">title here</h2>
</div>
</div><!--end main-->
</div>
</div><!--end container-->
The CSS:
#container {
max-width: 960px;
margin: auto;
}
#main {
display: table-cell;
width: 73em;
padding: 1em 2em 2em;
background-color: white;
}
#nav-left-title {
padding-bottom: 0.5em;
margin: 0;
color: white;
}
.nav-left{
display: table-cell;
width: 14em;
background-color: #87a8b1;
padding: 1.1em;
font-size: 1.2em;
}
.nav-left li {
padding: 0.5em 0;
border-bottom: 1px solid white;
}
h2.box {
padding: 15px 0;
margin: 50% 15px;
margin: auto;
text-transform: uppercase;
text-align: center;
}
div.box {
padding: 15px;
height: 180px;
width: 180px;
border-radius: 50%;
margin-top: 25px;
margin-left: 1.5em;
display:inline-block;
/* float: left; */
}
#good-designs {
background-color: green;
}
#temp, #temp2 {
background-color: yellow;
}
Hi you may use two properties to align all your elements
vertical-align:middle;
display:inline-table on div.box and
display:table-cell on h2.box; (for the texts inside your divs)
Check this code http://jsfiddle.net/fydC4/16/
This worked for me, replace inline-block with float left.
you are also calling margins twice on some element which are not necessary
here you go
jsfiddle.net/fydC4/14