Jump to content


Photo

Div control and floats


  • Please log in to reply
10 replies to this topic

#1 Ant

Ant

    Advanced Member

  • Member
  • PipPipPipPip
  • 204 posts

Posted 03 May 2012 - 12:14 PM

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.

Posted Image




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, 03 May 2012 - 12:16 PM.

  • 0

#2 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,726 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 03 May 2012 - 12:40 PM

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)
  • 0

#3 Ant

Ant

    Advanced Member

  • Member
  • PipPipPipPip
  • 204 posts

Posted 03 May 2012 - 12:55 PM

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.
  • 0

#4 Ben

Ben

    Administrator

  • Administrators
  • 5,649 posts
  • LocationChico, CA

Posted 03 May 2012 - 01:01 PM

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/
  • 0
Benjamin Falk
Falken Creative : Twitter

#5 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,726 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 03 May 2012 - 01:08 PM

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/
  • 0

#6 Ben

Ben

    Administrator

  • Administrators
  • 5,649 posts
  • LocationChico, CA

Posted 03 May 2012 - 01:18 PM

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.
  • 0
Benjamin Falk
Falken Creative : Twitter

#7 Ant

Ant

    Advanced Member

  • Member
  • PipPipPipPip
  • 204 posts

Posted 03 May 2012 - 03:19 PM

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.
  • 0

#8 Ben

Ben

    Administrator

  • Administrators
  • 5,649 posts
  • LocationChico, CA

Posted 03 May 2012 - 03:24 PM

No, clear:both should work -- I did test it.
  • 0
Benjamin Falk
Falken Creative : Twitter

#9 Ant

Ant

    Advanced Member

  • Member
  • PipPipPipPip
  • 204 posts

Posted 03 May 2012 - 03:46 PM

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.
  • 0

#10 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 03 May 2012 - 06:42 PM

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.
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#11 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,726 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 04 May 2012 - 06:33 AM

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.
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users