Want to center Div
-
Hi I have a CSS question.
I am trying to center a dive on this page http://ifdcorg.wordpress.com/benin/
It is the div called columncontainer with the three columns right under the large photo.
Here is my CSS. Can someone please help. Thanks!
}
#columncontainer {
width: 975px;
margin: 0 auto;}
#columnone {
width: 300px;
float: left;
padding: 75px 25px 50px;
margin: 0 auto;}
#columntwo {
width: 300px;
/* Account for margins + border values */
float: left;
padding: 75px 25px 2px;
margin: 0 auto;}
#columnthree {
width: 300px;
padding: 75px 25px 2px;
float: left;
margin: 0 auto;}
Here is the html
<div id=”columncontainer”>
<div id=”columnone”>
<h4>ABOUT
</h4>
Benin is located in West Africa between Nigeria and Togo. The country’s total land area is 112,622 sq km, which is slightly larger than Honduras.Benin’s climate is tropical in the south and semiarid in the north.
</div>
<div id=”columntwo”>
<h4>AGRICULTURE</h4>
Benin has joined with three other cotton-producing countries in the region – Burkina Faso, Chad and Mali (known as the Cotton-4 countries) – to lobby in the World Trade Organization for fewer subsidies to cotton producers in competing countries.Growth in real output has averaged around four percent in the past four years, but rapid population growth has offset much of this increase.
</div>
<div id=”columnthree”>
<h4>PRODUCTS
</h4>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-907″ src=”http://ifdcorg.files.wordpress.com/2014/07/beans_final.png” alt=”beans_final” width=”15″ height=”16″ />Beans</p>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-909″ src=”http://ifdcorg.files.wordpress.com/2014/07/cashews_final.png” alt=”cashews_final” width=”16″ height=”17″ />Cashews</p>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-910″ src=”http://ifdcorg.files.wordpress.com/2014/07/cassava_final.png” alt=”cassava_final” width=”16″ height=”17″ />Cassava</p>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-911″ src=”http://ifdcorg.files.wordpress.com/2014/07/cotton_final.png” alt=”cotton_final” width=”16″ height=”17″ />Cotton</p>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-912″ src=”http://ifdcorg.files.wordpress.com/2014/07/maize_final.png” alt=”maize_final” width=”16″ height=”17″ />Maize</p>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-913″ src=”http://ifdcorg.files.wordpress.com/2014/07/palmoil_final.png” alt=”palmoil_final” width=”16″ height=”17″ />Palm Oil</p>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-914″ src=”http://ifdcorg.files.wordpress.com/2014/07/peanuts_final.png” alt=”peanuts_final” width=”16″ height=”17″ />Peanuts</p>
<p style=”text-align:left;”><img class=”alignleft size-full wp-image-915″ src=”http://ifdcorg.files.wordpress.com/2014/07/yams_final.png” alt=”yams_final” width=”16″ height=”17″ />Yams</p></div>
</div>The blog I need help with is: (visible only to logged in users)
-
Hi there,
The column container actually is centered — it’s just that the third column has such narrower content than the other two that it doesn’t look spaced properly.
You could bump it over by adding some left padding to the third column, and then you could adjust the padding between the first two columns until it looked like you want it to.
Would that work?
-
-
-
-
Hi Eurello, while this is still open can you possibly answer another question for me?
I have a slider on the same page we have been discussing http://ifdcorg.wordpress.com/benin/
It works great on a desktop but doesn’t animate on iPad or mobile. Here is my code. I must be missing something in the @media area and I’m not sure what. Thanks for your help.
}
}.beninslider {
background: url(‘//ifdcorg.files.wordpress.com/2014/08/slideshow_new_benin.jpg’) 0 bottom repeat-x;
background-size: 400%;
height: 1200px;
-webkit-animation: h_slide 24s ease-out infinite;
-moz-animation: h_slide 24s ease-out infinite;
animation: h_slide 24s ease-out infinite;
}
}@keyframes h_slide {
0% {
background-position: 0 bottom;
}20% {
background-position: 0 bottom;
}25% {
background-position: 33.33333% bottom;
}45% {
background-position: 33.33333% bottom;
}50% {
background-position: 66.66667% bottom;
}70% {
background-position: 66.66667% bottom;
}75% {
background-position: 100% bottom;
}95% {
background-position: 100% bottom;
}100% {
background-position: 133.33% bottom;
}
}/* for 980px or less */
@media screen and (max-width: 980px) {
.beninslider {
background: url(‘//ifdcorg.files.wordpress.com/2014/08/slideshow_new_benin.jpg’) 0 bottom repeat-x;
background-size: 400%;
height: 350px;
-webkit-animation: h_slide 24s ease-out infinite;
-moz-animation: h_slide 24s ease-out infinite;
animation: h_slide 24s ease-out infinite;
}}
/* for 600px or less */
@media screen and (max-width: 600px) {
.beninslider {
background: url(‘//ifdcorg.files.wordpress.com/2014/08/slideshow_new_benin.jpg’) 0 bottom repeat-x;
background-size: 400%;
height: 350px;
-webkit-animation: h_slide 24s ease-out infinite;
-moz-animation: h_slide 24s ease-out infinite;
animation: h_slide 24s ease-out infinite;
}}
@media screen and (max-width:400px) {
.beninslider {
background: url(‘//ifdcorg.files.wordpress.com/2014/08/slideshow_new_benin.jpg’) 0 bottom repeat-x;
background-size: 400%;
height: 175px;
-webkit-animation: h_slide 24s ease-out infinite;
-moz-animation: h_slide 24s ease-out infinite;
animation: h_slide 24s ease-out infinite;
}
} -
-
I looked at the CSS for a few minutes and didn’t see an obvious solution.
Then I looked at the HTML saved in the page, and I noticed that you have some incorrect syntax in the form of extra closing “div” tags.
Take a look at this revision:
https://ifdcorg.wordpress.com/wp-admin/revision.php?revision=1345The number of opening div tags
<div>or<div class="someclassname">should match the number of closing div tags</div>But I counted 9 opening divs and 11 closing. Mismatched HTML tags like that can cause the rest of the page to go haywire. Before continuing to look at the slider issue, you should fix the divs so that basic HTML syntax is correct first. Doing that might solve the other problems you’re having too, but if it doesn’t, see if you can figure out the slider issue from there.Another note: in your slider media queries, I noticed a lot of the CSS is repeated when it doesn’t need to be. For example, this:
/* for 600px or less */ @media screen and (max-width: 600px) { .beninslider { background: url('//ifdcorg.files.wordpress.com/2014/08/slideshow_new_benin.jpg') 0 bottom repeat-x; background-size: 400%; height: 350px; -webkit-animation: h_slide 24s ease-out infinite; -moz-animation: h_slide 24s ease-out infinite; animation: h_slide 24s ease-out infinite; } }Could probably just be reduced to this:
/* for 600px or less */ @media screen and (max-width: 600px) { .beninslider { height: 350px; } }Test it out after the slider issue is sorted to remove duplicate CSS from the media queries—doing that will make future work and debugging easier.
Last note: here in the forums, if you use the “code” button just above the reply edit area or if you surround your code examples with backtick characters, it will give the code blocks special formatting and make them easier to read.
-
- The topic ‘Want to center Div’ is closed to new replies.
WordPress.com Forums 
