Centering divs
-
Hello,
Can you help me with my div issue here. I cannot get my div to center correctly and stay put when I resize the window. The page is: http://ifdcorg.wordpress.com/2scale/. I’m sure I’ve nested things wrong. My CSS is below my code.
Here is my code
<div id="wrappertwo"> <div class="aboutproject"> <div class="twotxt"> <h3 style="text-align:left;color:#f0f0f0;">Increasing Productivity and Incomes</h3> <p style="text-align:left;font-size:14px;color:#A0A0A0;">The 2SCALE project is funded by <a href="http://www.government.nl/ministries/bz/organisational-structure/directorates-general">DGIS</a> and private sector enterprises from 2012 to 2017.</p> <p style="text-align:left;font-size:14px;color:#A0A0A0;">The goal is to reach 1.15 million farming families and increase productivity by 100 percent and net incomes by 30 percent.</p> <p style="text-align:left;font-size:14px;color:#A0A0A0;">2SCALE develops agribusiness clusters (groups of professional farmers planting the same crop) and ensures that they engage in profitable markets.</p> <div> <a href="http://ifdcorg.files.wordpress.com/2014/08/2scale_woman.jpg"><img src="http://ifdcorg.files.wordpress.com/2014/08/2scale_woman.jpg?w=300" alt="2scale_woman" width="300" height="284" class="projectphotoone" /></a></div> </div> </div> Here is my CSS:}
}.twotxt {
width: 525px;
padding: 50px;
margin-left: auto;
}.projectphotoone {
position: relative;
top: -250px;
z-index: 1;
margin-right: 200px;
margin: 10px 5px 100px 475px;
}#wrappertwo {
background-color: #323232;
padding: 15px;
height: 425px;
}/* for 1024px or less */
@media screen and (max-width: 1024px) {
.twotxt {
width: 500px;
padding: 50px;
margin-left: 50px;
}/* for 980px or less */
@media screen and (max-width: 980px) {
.twotxt {
width: 375px;
padding: 50px;
margin-left: 30px;
}/* for 980px or less */
@media screen and (max-width: 980px) {
.projectphotoone {
position: relative;
top: -250px;
z-index: 1;
margin-right: 200px;
margin: -40px 5px 100px 300px;
}
}/* for 700px or less */
@media screen and (max-width: 680px) {
.twotxt {
width: 360px;
padding: 50px;
margin-left: -30px;
}/* for 700px or less */
@media screen and (max-width: 680px) {
.projectphotoone {
position: relative;
z-index: 1;
margin-right: 200px;
margin: 275px 5px 10px -3px;
}/* for 700px or less */
@media screen and (max-width: 680px) {
#wrappertwo {
background-color: #323232;
padding: 15px;
height: 725px;
}
}/////TEST THIS
a.main-button.button-margin {
margin-top: 3px;
}a.main-button {
background: none repeat scroll 0 0 #000;
color: #FFF;
}a.button-black {
background-color: #000;
color: #FFF;
}a.main-button {
display: inline-block;
padding: 15px;
font-size: 12px;
line-height: 19px;
font-family: “Raleway”;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
border-radius: 0;
transition: all .5s linear 0;
z-index: 3;
}a, a:hover, a:focus {
text-decoration: none;
}a.main-button:hover {
background-color: #5CBDE0;
}
}.storiesfromfield {
position: relative;
top: -250px;
z-index: 100;
margin: 145px 50px 100px 560px;
}.newsletters {
position: relative;
top: -194px;
z-index: 100;
margin: 145px 50px 100px 275px;
}.aboutproject {
width: 800px;
margin-left: 150px;
height: 700px;
position: relative;
}
}The blog I need help with is: (visible only to logged in users)
-
Hi ifdc1974,
I believe you could simplify things a bit and try something like this.
I changed the html just a bit and simplified out the css as well.Let me know how this works out.
#wrappertwo { background-color: #323232; padding: 15px; height: 425px; } .twotxt { max-width: 960px !important; margin: 0 auto !important; } .projectphotoone { float: right !important; margin-left: 20px; } <div id="wrappertwo"> <div class="twotxt"> <a href="http://ifdcorg.files.wordpress.com/2014/08/2scale_woman.jpg"><img src="http://ifdcorg.files.wordpress.com/2014/08/2scale_woman.jpg?w=300" alt="2scale_woman" width="300" height="284" class="projectphotoone" /></a> <h3 style="text-align:left;color:#f0f0f0;">Increasing Productivity and Incomes</h3> <p style="text-align:left;font-size:14px;color:#A0A0A0;">The 2SCALE project is funded by <a href="http://www.government.nl/ministries/bz/organisational-structure/directorates-general">DGIS</a> and private sector enterprises from 2012 to 2017.</p> <p style="text-align:left;font-size:14px;color:#A0A0A0;">The goal is to reach 1.15 million farming families and increase productivity by 100 percent and net incomes by 30 percent.</p> <p style="text-align:left;font-size:14px;color:#A0A0A0;">2SCALE develops agribusiness clusters (groups of professional farmers planting the same crop) and ensures that they engage in profitable markets.</p> </div> </div> -
Thanks! That seems to work well but I will need to fix my media queries to work because they got thrown off somehow. Hopefully that won’t be too difficult. Thanks again.
-
Glad it has you on the right track.
I think you can likely remove most of the media queries related to that bit of html and it should still work well on the smaller screens. -
Thanks. I forgot my iPad today so I can’t check that but it looks like I will have to tweak the gray area a little for iphone as it doesn’t look like the box is long enough.
-
@happycodingscom – Since WordPress.com users can only edit their CSS and not the underlying PHP or HTML of their website and each theme has its own specific CSS, you may want to look a little closer at the theme the OP is referring to before replying to forum questions. Thanks for helping out.
WordPress.com and WordPress are two entirely separate entities. For further understanding, check out http://en.support.wordpress.com/com-vs-org/
- The topic ‘Centering divs’ is closed to new replies.
WordPress.com Forums 