CODEWITHSUNDEEP
htmlcss
Julien Le Coupanec
Julien Le Coupanec

Reputation: 7998

CSS: Elements overflow on float div

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.

Upvotes: 1

Views: 97

Answers (1)

Daniel Perván
Daniel Perván

Reputation: 1716

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

Upvotes: 1

Related Questions