Jump to content

Div control and floats


Ant

Recommended Posts

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.

 

div_problems.jpg

 

 

 

 

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.

Edited by Ant
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...