CODEWITHSUNDEEP
htmlcss
user1675873
user1675873

Reputation:

I can't get two divs to be beside each other?

I am trying to put two divs beside each other and have it so when you hover over an image some text is displayed. This is my CSS:

.german img, chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}

.german img:hover, chembond img:hover {
    border: 1px solid #2e8ece;
    border-radius: 10px 10px 10px 10px;
}

.german-content, .chembond-content {
    display: none;
}

.german:hover .german-content {
    display: block;
    float: left;
    border: 1px solid;
}

.chembond:hover .chembond-content {
    display: block;
    float: right;
    border: 1px solid;
}

.german-content p, .chembond-content p {
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
    word-spacing: 5px;
    color: black;
}

.chembond {
    float: right;
}

.german {
    float: left;
}

.german, .chembond {
    display: inline;
    overflow: hidden;
}

And this is my HTML:

        <section id="projects-content">
            <p>Projects</p>
            <section class="german">
                <img src="assets/img/german.png" height="60" width="50" />
                <section class="german-content">
                    <p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it <a href="../../projects/german/">here</a> (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
                </section>
            </section>
            <section class="chembond">
                <img src="assets/img/german.png" height="60" width="50" />
                <section class="chembond-content">
                    <p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it <a href="../../projects/german/">here</a> (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
                </section>
            </section>
        </section>

This is what it currently does: http://www.penguinie.co.uk/#projects

Also, Is there an easier way to do what I'm trying to do? (which is to put both of the images side by side and have them stay side by side when I hover over them and the text appears).

Upvotes: 0

Views: 215

Answers (2)

user1537415
user1537415

Reputation:

Use display:inline-block; instead of display:block; on the divs.

Using display:inline-block you can still assign width to an element, unlike display:inline. Block level elements will always take a new row.

However, you might notice that there's space in between:

Space in between

If needed, this can be easily fixed by applying this to the parent element: font-size:0;.

Here's a fiddle about it.

Upvotes: 5

Oriol
Oriol

Reputation: 288670

In general, I use @Christian's inline-block solution.

But another possibility is using float: left.

Remember to clear the floating (e.g., with <div style="clear:both"></div>) after your floating elements.

Upvotes: 0

Related Questions