CSS: Elements overflow on float div

Question

It's a tricky problem I have and I don't find the best solution. Here is the page:

https://waaave.com/tutorial/android/android-ics-for-your-htc-desire/

As you can see, the green div element overflows the user profile. I don't want to use a margin-left to align it because it will change the position of other green elements and I want to keep a common structure between each of them (this means I don't want to add a new class to align this green element). I want to design a clean solution and make this green element automatically align when it is in the first part (next to the user profile) and in the second part (below the user profile) and only with css (I want this solution working with JavaScript deactivation).

overflow element

here is the main class for this div (others are just margin top and bottom adjustments):

.block-info {
    display: block;
    margin: 10px 0 0;
    padding-bottom: 3px;
    border-left: 28px solid $green;
    .icon-block, .text-block {
        display: block;
    }
    .icon-block {
        float: left;
        margin-top: 5px;
        margin-left: -23px;
    }
    .text-block {
        padding-left: 18px;
    }
    + br {
        display: none;
    }
}

If someone have an idea.

Sorry to be a pain, but could you include the relevant classes that the Green <div> uses? Having to click around to find out and it's a little trickier than I thought! :) — MackieeE
– MackieeE, Commented Nov 4, 2013 at 9:28
yes done. In fact, I was wondering if we could do something about the user profile to push the elements to the right. — Julien Le Coupanec
– Julien Le Coupanec, Commented Nov 4, 2013 at 9:36

Daniel Perván · Accepted Answer · 2013-11-04 09:47:52Z

1

Set .block-info to display: table and its children to display:table-cell (this might not be needed, but I believe it should be done for correctness) and it should behave more like you expect.

Screenshot

answered Nov 4, 2013 at 9:47

Daniel Perván

1,71613 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS: Elements overflow on float div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related