CODEWITHSUNDEEP
htmlcss
Black Bird
Black Bird

Reputation: 797

Div Positioning on separate line

I want to get each portfolio_box_13 div on their own line at 100% width. Currently, two divs share a line (using a wrapper) at 50%. I would like both divs within the wrapper to be the same height.

I am creating a layout for mobile, so I do not want to modify the HTML if possible.

[jsFiddle].

I have tried setting the width to 100%, but then the colored div takes up a majority of the width.

To clarify: I want it to display red div on one line, and pink div below it. See image for example.

ex

HTML:

<div class="portfolio_wrap">
    <div class="portfolio_box_13 red">
    </div>
    <div class="portfolio_box_13 pink">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 green">
    </div>
    <div class="portfolio_box_13 lightgreen">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 blue">
    </div>
    <div class="portfolio_box_13 lightblue">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>

CSS:

.portfolio_wrap {
    width: 100%;
    height: 33.4%;
    display: table;
}
.portfolio_box_13 {
    width: 50%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    overflow:hidden;
}

Upvotes: 1

Views: 487

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8274

Restructure your HTML.

I would recode the mark-up so your above 'solid color' blocks have one shared selector / class eg. .solidbox (you can add more later if you must)

..and then your text content have one shared class specific to this eg .textbox selector and then you just set width: 100%; to both and display:inline-block;

Simplified JSfiddle Demo. <-- (swap with your actual colors / content)

Use 3 selectors as below:

.solidbox { 
   // this is your solid box
}

.textbox { 
  // this is your text content box
}

.red { 
  // this is your colored backgrounds
}

If you don't want a static height: simply set height: to 100%; and use a min-height: 50px; // sample number with it!

Upvotes: 0

DreamTeK
DreamTeK

Reputation: 34197

You can do this simply using:

.portfolio_box_13 {
    float:left;
    clear:left;
    min-height:120px;
}

The trick here is needing to specify a height or min-height for the div .portfolio_box_13 as it has no content.

To make them the same height you would need to set a fixed height.

SNIPPET

.portfolio_wrap {
    width: 100%;
    height: 33.4%;
    display: table;
}
.portfolio_box_13 {
    width: 50%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    overflow:hidden;
    float:left;
    clear:left;
    min-height:120px;
}
.red {
    background: red;
}
.green {
    background: green;
}
.blue {
    background: blue;
}
.pink {
    background: pink;
}
.lightblue {
    background: lightblue;
}
.lightgreen {
    background: lightgreen;
}
<div class="portfolio_wrap">
    <div class="portfolio_box_13 red">
    </div>
    <div class="portfolio_box_13 pink">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 green">
    </div>
    <div class="portfolio_box_13 lightgreen">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>
<div class="portfolio_wrap">
    <div class="portfolio_box_13 blue">
    </div>
    <div class="portfolio_box_13 lightblue">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed aliquet magna. Proin vitae lectus ac sem auctor tempor ut gravida velit. Nullam condimentum neque ac erat condimentum gravida. Maecenas sodales leo elit, a laoreet ligula consequat sed."</p>
    </div>
</div>

Upvotes: 1

Related Questions