CODEWITHSUNDEEP
htmlcss
Naomi K
Naomi K

Reputation: 1447

how to always keep two divs side by side

I have two divs floating left. I dont really want to use position absolute though, is there another way to keep the side by side without using position absolute? or is this the only way?

<div class="moreinfo" id="darkgray">
            <p>
                Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
            </p>
        </div>
        <div class="moreinfo" id="lightgray">
            <h2>
                "WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE &amp; OFFLINE."
                <a href="#">READ ARTICLE BY WIRED SAFETY</a>
            </h2>
        </div>
        <div class="clear"></div>

css

.moreinfo{
    width:715px;
    height:250px;
    float:left;
    color:white;
}

Upvotes: 6

Views: 15619

Answers (5)

Naomi K
Naomi K

Reputation: 1447

the best way i noticed was to use percent 50% for the width of both

Upvotes: 2

Deryck
Deryck

Reputation: 7658

Set the containing element to a width large enough to contain both the way you want.

body {
  min-width: 1450px;
}

Here's a fiddle

Upvotes: 0

Super Hornet
Super Hornet

Reputation: 2907

the best solution is using display:table and display:table-cell for being sure that they are side by side

Upvotes: 0

BhushanK
BhushanK

Reputation: 1243

the css you have written is work correctly for keeping div side by side, but you have to take precaution about the width of the inner floating divs, it should not be greater than the parent's width.
try this (reduce the width of the moreinfo just for demo.):

.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}

Upvotes: 0

Mingle
Mingle

Reputation: 836

You can use display: inline-block to have them side by side.

Here is an example: http://jsfiddle.net/2sZCb/

.moreinfo {
  display: inline-block;
}

Here is a good article on the same issue you're having: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Upvotes: 10

Related Questions