Question

I’ve been give this layout where I have a section, with some information.
However, visually, that section has some rows across 100% wide the screen, while the content is only 70%.

Styles are inline for clarification proposes:

Question 1 – is this an acceptable markup ?

<section>
  <div class="row-red" style="width=100%; background-color: red;">
    <h1 style="width:70%">section header here</h1>
    <p style="width:70%">paragraph 1</p>
  </div>
  <div class="row-blue" style="width: 100%; background-color: blue;">
    <p style="width:70%">paragraph 2</p> 
  </div>
</section>

Thanks in advance

here’s an example taking from the fiddle wrote here on the first place:

http://jsfiddle.net/gSLww/9/

Answer 1

Yes, it’s a acceptable Markup but only you have to work on it CSS. Write like this:

.row-red,.row-blue{
    padding-right:30%
}

HTML

<section>
  <div class="row-red" style="background-color: red;">
    <h1>section header here</h1>
    <p>paragraph 1</p>
  </div>
  <div class="row-blue" style="background-color: blue;">
    <p>paragraph 2</p>
  </div>
</section>

Check this http://jsfiddle.net/gSLww/15/