Div control and floats

Ant · May 3, 2012

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.

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>

HEADER</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor nulla, a semper risus. In pharetra sagittis porta.</div>

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>

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.

Edited May 3, 2012 by Ant

Andrea · May 3, 2012

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 · May 3, 2012

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.

falkencreative · May 3, 2012

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.com/article/how-to-code-html-emails

http://sixrevisions.com/web_design/creating-html-emails/

http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/

Andrea · May 3, 2012

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.com/code-html-email-newsletters/

falkencreative · May 3, 2012

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 · May 3, 2012

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.

falkencreative · May 3, 2012

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

Ant · May 3, 2012

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 · May 3, 2012

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 · May 4, 2012

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.

Sign In

Div control and floats

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation