layout issues with css (twitter bootstrap)

Question

I'm using the css styles from Twitter Bootstrap but I can't seem to align my "span16" div with my breadcrumb container. The breadcrumb container is the size I need. I've attached a screenshot to show the issue.

enter image description here

Here is my HTML:

<div class="container">
    <ul class="breadcrumb" style="margin-top: 10px;">
        <li><a href="search.php">Search</a>&raquo;</li>
        <li class="active">Basic</li>
    </ul>

    <div class="row">
        <div class="span16 well">
            <form id="form_id" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
                <div class="row">
                    <div class="span-one-third">
                        Span 1/3
                    </div>
                    <div class="span-one-third">
                        Span 2/3
                    </div>
                    <div class="span-one-third">
                        Span 3/3
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

You can view the full page here

Any idea what the issue is?

I'm guessing there is right-side padding or margin on the ul or li tags, but without seeing the full css we can't really tell from just the html. Can you post a link to the full page? — Ben D
– Ben D, Commented Jan 14, 2012 at 15:42
Ben: I revised the question and posted the URL to the page. Thanks, Paul — Paul
– Paul, Commented Jan 14, 2012 at 16:13

benni_mac_b · Accepted Answer · 2012-01-14 16:26:18Z

2

The span16 is wider than the container. The breadcrumb is restricted by the width of the container. Increasing the size of the container will allow the breadcrumb to match up.

answered Jan 14, 2012 at 16:26

benni_mac_b

8,9075 gold badges43 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Over a year ago

changing the container to 980 worked just fine. Now everything lines up. Thanks!

Adaz · Accepted Answer · 2012-01-14 16:16:16Z

2

The .span16 {} has a static width of 940 but it also has 19px padding applied so it's 940 + 2x19

answered Jan 14, 2012 at 16:16

Adaz

1,66512 silver badges14 bronze badges

1 Comment

Ben D Over a year ago

Yep, this is it. Change your span16 width and your one-third class (to 286px)

Collectives™ on Stack Overflow

layout issues with css (twitter bootstrap)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related