How can I get my rows 100% wide?


Tags: css,twitter-bootstrap

Problem :

I am having a few issues aligning some rows. I am displaying a section which takes up 100% height of the viewport. So when you view this section on your screen, you will only see this section.

Within this section, I have a title and subtitle. The title should be displayed near the top of the section, but the subtitle should be displayed vertically in the middle of the section. So if your screen is 1000px high (which will make this section 1000px in height) then the subtitle should be displayed at around the 500px point. My section currently looks like the following

<section class="block-hero">
  <div class="container container-table">
    <div class="row vertical-top-row">
      <div class="col-md-12 centerText">
        <h1 class="heroTitle">Some Title</h1>
      </div>
    </div>
    <div class="row vertical-center-row">
      <div class="col-md-12 centerText">
        <h2 id="subTitle">Some<br>Text</h2>
      </div>
    </div>
  </div>
</section>

And the CSS is like so

html, body {
  height:100%;
}
.site-wrapper {
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
}

.block-hero {
  height:100%;
  width: 100%;
  z-index: 300;
  overflow:hidden;
}

.container-table {
    display: table;
    width:100%;
    height:100%;
}
.vertical-top-row {
    display: table-cell;
    vertical-align: top;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
    height:100%;
}

.centerText {
    text-align: center;
}

#subTitle {
    width: 100%;
}

I have a fiddle One problem I am now having is how I currently have it, my rows are no longer 100% width. This means that the subtitle is not centered precisly in the middle. I think I have the vertical align working, but now I need to center the text in the middle.

How could I go about doing this or do I need to make changes to what I currently have?

Thanks



Solution :

After playing around with you jsfiddle a bit, the thing that's throwing you off seems to be your use of display: table in conjunction with Bootstrap's rows and columns. Bootstrap isn't made to work with tables that way, it's made to replace them, so it's sort of fighting for control with the table.

The main thing is it looks like your rows are ending up next to each other rather than one below the other, and that's because you have display: table-cell on your rows without any display: table-row elements around them, so the browser seems to be acting like there's a table-row element around both of them, thereby forcing them to lie next to each other, since they're now two cells in the same row.

Your best bet, IMO, is to pick one grid method or the other, Bootstrap or table cells. Personally I prefer Bootstrap, but that's your call. If you want to go the table route, remove all the .row and .col-sm-12 classes, set your former .row elements to display: table-row, and set your former .col-sm-12 elements to display: table-cell.

If you want to go the Bootstrap route (my preference), you have options. You didn't really specify whether you'd have any other content besides these two headings in that section, but if not, an easy way to vertically align your subtitle would be to give its .row something like margin-top: 40% to push it down a relative distance from the row above it. Play around with the percentage and see what you like. Here's an example based on your original jsfiddle: https://jsfiddle.net/ck3epwm5/1/

By the way, if your preferred behavior is really for the section to be 100% of the viewport height, you might want to replace height: 100% with height: 100vh. This is a new(ish) CSS3 length unit that literally means "percent of viewport height" (technically, 1vh is defined as "1/100th of the height of the viewport"; MDN reference) and thus is based directly on the viewport itself, whereas % values are based on the nearest ancestor with a specified height, which can sometimes cause unexpected behaviors.


    CSS Howto..

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to put those things next to eachother? CSS

    How to add a 3rd level to my CSS drop down menu?

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How to change CSS display property using an anchor tag?

    How to find last/first not empty child using only CSS?

    How to increase the height of footerrow in jqgrid

    How to make all borders the same color?

    How to organize css files in a Joomla 2.5 template? [closed]

    CSS, how to lign up 3 seperate containers side by side under a header in IE

    how to add css background color for div tag

    How to create a dotted shadowy effect on an image with CSS?

    How to style this views in drupal 7 /custom content type/?

    CSS How to have a text caption in the bottom of an image?

    CSS class is missed after jQuery replaceWith. How to fix?

    In firebug, how do I find out all of the css styles being applied to a particular element?

    How to add incremental values to a css attribute with Jquery

    How can align these elements?CSS

    CSS: How to select all rel atributes

    How to ensure a webpage's content extends to the bottom of a webpage using only CSS

    How to position a button to be always a certain distance from the screen in css? [closed]

    How to align buttons below and right-aligned to a HTML list?

    How to override background of Bootstrap Material Design theme?

    How to make dynamic slideshow using php, mysql, css and html?

    CSS - How to display dropdown text in one row?

    How do I replace color: windowtext;

    How do I blur an element with scroll, until it's blurred to a certain point?

    How do you get multiple views in one window like JSFiddle does [closed]

    How to use external css file to style a javafx application

    CSS How to get the same height?