CODEWITHSUNDEEP
csstwitter-bootstrap
bernhardh
bernhardh

Reputation: 3309

Padding to the right side of row

I am working on a design with twitter bootstrap 2 (responsive). In this design, I have a header, left sidebar, content and footer.

Basically, I have the following code structure - have a look at http://jsfiddle.net/w4yh9/3/

The important section is the:

<div id="inner" class="span10">
...
</div>

Please have a look at the attached screenshot, especially the yellow marked area:

Padding problem

I have the following question / problem: How can I add some padding to the right for all content elements (success message, content, table) - it should work on smaller screens as well?

Upvotes: 0

Views: 66

Answers (2)

Charles Ingalls
Charles Ingalls

Reputation: 4561

I would give the parent container a padding and also apply box-sizing: border-box to it. Check out my JSFiddle: http://jsfiddle.net/w4yh9/4/

#main {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #FFF;
    border-radius: 4px;
}

.span10 {
    padding-right: 10px;
    box-sizing: border-box; 
}

Upvotes: 1

Richard
Richard

Reputation: 61309

You could try using

#main {padding-right:5px}

But maybe that makes #main wider than you'd like.

In that case, you could use

#main > div { width:98%; }
#main > .navbar {width:100%; }

to set all children divs of main to 98% width, and then over-ride this for the (hopefully limited number of) specific children that you want to be full-width.

Upvotes: 0

Related Questions