Aligning Divs

ifdc1974 · Member · Sep 12, 2014 at 8:53 pm
Copy link

Add topic to favorites
Hello,

I have battled with this for most of the day. I am trying to get my photo inside the div so it lines up with the text and the gray background. Here is my CSS and HTML. I will also need it to be responsive. I’m newer to CSS so I’m sure I have this pretty much screwed up. Thanks for your help.

Here is the page http://ifdcorg.wordpress.com/2scale/
```
}

.section {
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: #FFF;
}

.section-background {
	background-color: #F5F5F5;
	width: 100%;
	position: relative;
	z-index: 1;
	height: 340px;
	margin-top: -25px;
}

.section-content {
	width: 100%;
	max-height: 340px;
}

.large-6 {
	width: 45%;
}

.column {
	z-index: 1;
	float: left;
	margin-left: 25%;
	padding: 0;
	width: 45%;
}

.photosectionone {
	z-index: 1;
	max-height: 340px;
	width: 604px;
	margin-right: 175px;
	float: right !important;
	margin-top: -263px;
}
```
<div class=”section section-background”>
<div class=”section-content “>
<div class=”column large-6″>

Increasing Productivity

and Farmer Incomes</h3>

The 2SCALE project is funded by

DGIS and private sector enterprises from 2012 to 2017.</p>

The goal is to reach 1.15 million farming families and increase productivity by 100 percent and net incomes by 30 percent.

<h2 style=”font-size:10px;line-height:1;”> STORIES FROM THE FIELD > </h2></div>
<div class=”photosectionone”><img src=”http://ifdcorg.files.wordpress.com/2014/08/2scale_photo1.jpg” alt=”2scale_photo” width=”604″ height=”340″ />

</div>
</div>
</div>

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 13, 2014 at 10:12 pm
Copy link
I was getting a little lost with your code and CSS, so I basically built my own to see how I could get what I thought you wanted with the minimum CSS and HTML possible and this is what I came up with. First take a look at http://intheoutbox.wordpress.com/divs/ and see if that is what you are wanting that section to look like. If it is, here is what I did.

First I inserted the image you want as right aligned at the “beginning” of the h3 title instead of inserting it separately. That puts the image to the right of the heading and the text.

My HTML (copied from my page editor):
```
<div class="section-background">
<div class="section-content">
<a href="https://ifdcorg.files.wordpress.com/2014/08/2scale_photo1.jpg"><img class="alignright" src="http://ifdcorg.files.wordpress.com/2014/08/2scale_photo1.jpg" alt="2scale_photo" width="604" height="340" /></a>
<h3>Increasing Productivity
and Farmer Incomes</h3>
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.

The goal is to reach 1.15 million farming families and increase productivity by 100 percent and net incomes by 30 percent.
<h2 style="font-size: 10px; line-height: 1;">STORIES FROM THE FIELD ></h2>
</div>
</div>
```
My related CSS:
```
.section-background {
    background-color: #f5f5f5;
    min-height: 360px;
}
.section-content {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
```
In my CSS, I set the section background to a min-height of 360px to allow me to put 10px of padding on top and bottom of .section-content. I set .section-content to a max width of 1000px and set the left and right margins on it to “auto” so that it would center within the .section-background div.
ifdc1974 · Member · Sep 15, 2014 at 6:34 pm
Copy link
Just what I wanted. Thanks so much for all your help. I’m still trying to understand CSS and minimization. Now I just need to make sure that there is padding around the text when it’s viewed on a smaller screen.

Thanks again!
thesacredpath · Member · Sep 15, 2014 at 9:27 pm
Copy link
You are welcome.

No items found.