mintertweed

# February 1, 2013 at 6:54 pm

Edit: The problem is sort of fixed, but not in a very elegant way. Please read my second post on this thread. Thank you.

I am having some difficulty with getting the result I want with automated columns, here. Basically, I want to have two columns. The first one will have Contact, Address, Cell, and Social Networks. The second column will have Biography and Curriculum Vitae. But no matter what I do, “Biography” keeps rushing over to the first column even though the social network buttons appear first in the HTML. How do I make it so the social network buttons are at the base of the first column and the second column begins with Biography? Thank you in advance! This has been annoying me for most of the day.

mintertweed

# February 1, 2013 at 8:48 pm

I had to do something really nasty code-wise to make “Biography” go to the second column. I applied a div for each social network button:

.social {
margin-right: 5px;
margin-bottom: 23px;
border: 4px solid #A3BA2D;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
float: left;
}

.social:hover {
border: 4px solid #B8D432;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
float: left;
}

And then for the very last button, I had to make another div class:

.social-end {
margin-right: 180px;
margin-bottom: 23px;
border: 4px solid #A3BA2D;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
float: left;
}

.social-end:hover {
border: 4px solid #B8D432;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
float: left;
}

I had to put 180px of margin-right to clear the text from that side and push it on over to the second column. I then added 23px of margin-bottom to effectively do the same thing. There has got to be a better way of doing this. Please help me make my code better! Thank you in advance.

This is basically what it looks like now and that is how I want it to look, but I wish I knew a better way of coding it. Help!

Edit: Any suggestions on design, as well, would be greatly appreciated.

joshuanhibbert

# February 1, 2013 at 9:03 pm

Rather than creating a new element to deal with the floated social links, wrap the social links in a div and clear that element.

This is one of the many examples of floats causing unwanted issues. I would recommend using inline-block here instead of floats.

mintertweed

# February 1, 2013 at 9:11 pm

Could you give me direct help, I mean, on how to go about coding it in my CSS? So, I create a new div that contains the six social divs and then I somehow “clear the element?” And I shall look up inline-block.

wolfcry911

# February 1, 2013 at 10:49 pm

remove the margins (or keep a bottom 10px margin like the p)

add clear: left; to the h2

done

joshuanhibbert

# February 2, 2013 at 2:20 am

@mintertweed First you need to decide whether or not you want to use floats (as you currently are) or some other method of aligning the elements (such as inline-block). I would personally advise against using floats (I’ve explained why here: http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/).

If you want to keep using floats, then do what @wolfcry911 said. Otherwise, give my article a read. If you still have any questions, let me know.

mintertweed

# February 2, 2013 at 3:42 pm

Thank you to both of you. I used @wolfcry911‘s method and, @joshuanhibbert, I shall read your article. Thanks again!

jurotek

# February 2, 2013 at 4:20 pm

@joshuanhibbert, it’s been a while since I read you article first time and it got me hooked on inline-block thing. Since then I completely stopped using floats with exception of img. Made my life lot easier. And as far as white pace: There’s so many different ways to deal with it and sometimes I don’t even bother with it if I need space between elements.

joshuanhibbert

# February 2, 2013 at 4:30 pm

@jurotek That’s almost describing what I do exactly! I know that there are plenty of people in the float camp still, as I was for a long time, but I swear that since predominantly using inline-block, I’ve just had less issues with layout.