[Ant]

I keep running into the same problem. I do not have full control over div alignments when it comes to floats.I'm attaching an image that should describe what I want to do.






This is a recurring problem and at one point I wanted to use a table but have been trying the set up with divs since to me it's the harder way that I want to learn.

I think what I am missing is a clear of some sort. But I do not know how to implement it with 4 divs.

I am also going to paste my current code. This is for a NEWSLETTER template so I'm stylizing everything inline.I'm using mailchimp and one of their templates rather than fully coding my own. Therefore I do not ( I don't think) have access to the css file linked to the template thus I'm not using classes or id's for the divs or external or internal stylesheets.



<div style="float: left;width: 275px;margin: 8px 14px 8px 10px;font-family: Arial;font-size: 14px;text-align: left;color: #505050;line-height: 150%;">
<h4 style="color: #202020;display: block;font-family: Georgia;font-size: 22px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
HEADER</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor nulla, a semper risus. In pharetra sagittis porta. Vivamus at laoreet mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sed suscipit libero. Vestibulum at nunc mi, sit amet bibendum turpis. Nulla vel purus ac arcu sollicitudin egestas. Vestibulum lacinia mauris eget neque consectetur pulvinar.</div>
<div style="float: left;width: 275px;margin: 8px 14px 8px 10px;font-family: Arial;font-size: 14px;text-align: left;color: #505050;line-height: 150%;">
<h4 style="color: #202020;display: block;font-family: Georgia;font-size: 22px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
HEADER</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor nulla, a semper risus. In pharetra sagittis porta.</div>
<div style="float: left;width: 275px;margin: 8px 14px 8px 10px;font-family: Arial;font-size: 14px;text-align: left;color: #505050;line-height: 150%;">
<h4 style="color: #202020;display: block;font-family: Georgia;font-size: 22px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
HEADER</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor nulla, a semper risus. In pharetra sagittis porta. Vivamus at laoreet mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sed suscipit libero. Vestibulum at nunc mi, sit amet bibendum turpis. Nulla vel purus ac arcu sollicitudin egestas. Vestibulum lacinia mauris eget neque consectetur pulvinar.</div>
<div style="float: left;width: 275px;margin: 8px 14px 8px 10px;font-family: Arial;font-size: 14px;text-align: left;color: #505050;line-height: 150%;">
<h4 style="color: #202020;display: block;font-family: Georgia;font-size: 22px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
HEADER</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor nulla, a semper risus. In pharetra sagittis porta. Vivamus at laoreet mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sed suscipit libero. Vestibulum at nunc mi, sit amet bibendum turpis. Nulla vel purus ac arcu sollicitudin egestas. Vestibulum lacinia mauris eget neque consectetur pulvinar.</div>

Thanks
A.

This post has been edited by Ant: 03 May 2012 - 12:16 PM

[Andrea]

You could put the 2 divs next to each other into divs of their own, then they would line up as you want.

If by newsletter you mean an HTML email - those need to be created using tables. (unless your chimp transfers things for you)

[Ant]

Andrea yes it's an email. I know newsletter is probably an old term but it's technically email marketing I guess.

I lost you when you wrote "If by newsletter you mean an HTML email - those need to be created using tables. (unless your chimp transfers things for you)"

Why couldn't I use divs.

Mailchimp allows divs, css etc etc.

You wrote: "You could put the 2 divs next to each other into divs of their own, then they would line up as you want."

So you mean a div with 2 divs in it. Then under it another div with 2 divs in it?

Don't i need to float the 2 divs inside the single div to get them on one line?

A.

[Ben]

You shouldn't use divs because you'll run into cross browser issues when that email gets viewed in different email clients. When coding email newsletters, you unfortunately have to go back to old standards: tables and inline CSS.

See:
http://kb.mailchimp....ode-html-emails
http://sixrevisions....ng-html-emails/
http://net.tutsplus....-for-beginners/

[Andrea]

For a website, you can float the two divisions inside their container division and you need to clear the second div container. don't have time to try it out, but it should work.

But --- floats don't work in emails, either.

The reason HTML emails need to be created in tables is how email clients support (or usually, not support) html and styling, and if you used something other than tables, your pretty email would arrive in sad pieces in most people's inboxes. I do not know if Mailchimp would convert an email created with divisions, you may want to check into that, but I do know that html emails must be coded with tables for layout and all internal styling in order to work in most email clients. HTML Emails are a whole new adventure....

http://www.sitepoint...il-newsletters/

[Ben]

In response to your original question, there are a couple ways to do it:

Add "clear" to your 3rd div:

<div style="float:left; height:100px; width:50px; background:red;">test</div>
<div style="float:left; height:50px; width:50px; background:green;">test</div>

<div style="float:left; height:100px; width:50px; background:blue; clear:both;">test</div>
<div style="float:left; height:80px; width:50px; background:gray;">test</div>

or place each within a wrapper div and use overflow:hidden; to make the wrapper fully contain the floated contents (or use clear:both; on the second wrapper div):

<div style="overflow:hidden;">
<div style="float:left; height:100px; width:50px; background:red;">test</div>
<div style="float:left; height:50px; width:50px; background:green;">test</div>
</div>
<div style="overflow:hidden;">
<div style="float:left; height:100px; width:50px; background:blue;">test</div>
<div style="float:left; height:80px; width:50px; background:gray;">test</div>
</div>

Of those two options, option 1 seems cleaner and requires less code.

[Ant]

Thank you very much all of you.

I had NO IDEA I couldn't use divs etc. I thought I was getting all fancy typing in divs positions etc.

Now I have to go back and stylize using tables.

Ben if I clear:BOTH; the 3rd div won't that clear the div to the left AND to the right thus kicking the 4th div to the next line.

I didn't try it yet but I thought thats what it did.



A.

[Ben]

No, clear:both should work -- I did test it.

[Ant]

Ok thanks.

I'll try it and if it works I will try and understand why it DOESN"T clear the 4th div to the RIGHT since I thought thats what clear:both did.(left and right)

A.

[benjaminmorgan]

I think you should just be able to make a container div around the top 2 divs and give it a height. Then put a div around the bottom two and add height.

[Andrea]

benjaminmorgan, on 03 May 2012 - 06:42 PM, said:

I think you should just be able to make a container div around the top 2 divs and give it a height. Then put a div around the bottom two and add height.

Adding height is a problem if that layout is used for different pages with different amounts of content.