Search code examples
htmlcsstwitter-bootstraplayoutformatting

rows getting pushed down by long column in bootstrap

I'm trying to make a layout like this using bootstrap.

desired layout

However, I keep getting this

what i actually get

Does anyone know how to prevent the second row from being pushed down by the large column?

Here is a skeleton of my HTML:

<div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 about">
                <img >
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 resume">
                <img >
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 websites">
                <img >
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 waterfall">
                <img >
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 middlebox">
                <p id="middletext"><strong></strong><br></p>
            </div>
        </div>
</div>

and here is the corresponding CSS:

.col-xs-3{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0;
    border: 2px solid black;
}

.col-xs-3.resume{
    margin-top: 3vh;
}

.col-xs-3.websites{
    height: 60vh;
    margin-top: 3vh;
}

.col-xs-6{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0px;
    border: 2px solid black;
}

.col-xs-6.about{
    margin-top: 3vh;
}
Solution

  • One way that I can think of is to use one div as parent for the first 2 columns:

    html:

    <div class="container">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-sm-9" >
                <div class="col-xs-8 col-sm-8 col-md-8 about">
                    <img >
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 resume">
                    <img >
                </div>                
                <div class="col-xs-4 col-sm-4 col-md-4 waterfall">
                    <img >
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8 middlebox">
                    <p id="middletext"><strong></strong><br></p>
                </div>                
            </div>            
            <div class="col-xs-3 col-sm-3 col-md-3 websites">
                <img >
            </div>
        </div>
</div>

    css

    .col-xs-4{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0;
    border: 2px solid black;
}

.resume{
    margin-top: 3vh;
}

.websites{
    height: 68vh;
    margin-top: 3vh;
    border: 2px solid black;
}

.col-xs-8{
    height: 33vh;
    margin-bottom: 3vh;
    padding: 0px;
    border: 2px solid black;
}

.col-xs-8.about{
    margin-top: 3vh;
}