引导程序-对齐问题

Question

I have a comics website that I'm complete redoing- Hitting Trees with Sticks .

I'm trying to go from that current horrible 1990's layout to this layout (colors and fonts are just placeholders atm)...

And here's how I think the CSS divs would be laid out for it:

Anyway,

I'm trying to have the search bar to the far right be able to expand down once something is searched. Right now I pushes down the rows beneath it. It should be independent of those rows. Basically, my main goal is to have the Search bar be inline with the top two boxes (Highlighted Comic and Latest Artwork), but also not push down the outputted comics below... it sort of just need to be an independent column .

    <div class="row-fluid show-grid">
    <div class="span6 offset2">
        <img src="./images/highlighted comic.png"/>
        <img src="./images/latest artwork.png"/>
    </div>
    <div class="span2">
        <?php include 'include/search_field.php'; ?>
    </div>
</div>

//Where the comics are outputted:
<div class="row-fluid show-grid">   
    <div class="span6 offset2">
        <div class="allimages">
            <div class="row-fluid show-grid">   
                <div class="span6">
                    <h3>latest</h3>
                    <?php include 'scripts/paging.php'; ?>
                </div>
                <div class="span2">
                    <h3>hot</h3>    
                    <?php echo hot(7, $site); ?>
                </div>
            </div>
        </div>
    </div>
</div>

And I can't just move <?php include 'include/search_field.php'; ?> <?php include 'include/search_field.php'; ?> to below where the comics are outputted (I know this would solve the problem of the expanding search pushing down the the comics... but the Search box needs to be in alignment with the Highlighted Comic and Latest Artwork boxes)

---

This is what it looks like when I search:

Pre-search:

When you search for something:

Any thoughts?

Thanks!

---

EDIT: I am unable to push the search box flush against the left side boxes

    <div class="row-fluid">
    <div class="span8 offset2">
        <div class="row-fluid">
            <div class="span5"><img src="./images/highlighted comic.png"/></div>
            <div class="span4"><img src="./images/latest artwork.png"/></div>
        </div>
        <div class="row-fluid">
            <div class="comicDisplay">
                <div class="well">
                    <div class="row-fluid"> 
                        <div class="span7"><h3>Latest</h3>  <?php include 'scripts/paging.php'; ?></div>
                        <div class="span2"><h3>Hot</h3> <?php echo hot(7, $site); ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="span2">
        <?php include 'include/search_field.php'; ?>
    </div>
</div><!--End top row fluid-->

Answer 1

independent column

That's it!

Check this out (from http://jsfiddle.net/Q7k7W/3/ ):

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<style type="text/css">
.b {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>

<div class="container-fluid" style="margin-top: 20px;">
    <div class="row-fluid">
        <!-- The main content column placed on the left (for appropriate viewports/browser widths) -->
        <div class="span9 b">
            <div class="row-fluid">
                <div class="span8 b">Highlighted Comic</div>
                <div class="span4 b">Latest Artwork</div>
            </div>
            <div class="row-fluid">
                <div class="span8 b">Latest</div>
                <div class="span4 b">Hot</div>
            </div>
        </div>
        <!-- 
        The search/sidebar column placed on the right.
        The height of this column shouldn't affect the height of the left column.
        -->
        <div class="span3 b" style="height: 300px;">
            Search
        </div>
    </div>
</div>

You would create two divs for the two columns (one for the left-hand-side main content and the other for the search/sidebar on the right). In the jsfiddle example above, the divs are being nested (see 'Fluid nesting' section of the Bootstrap scaffolding docs ).

And I can't just move to below where the comics are outputted (I know this would solve the problem of the expanding search pushing down the the comics... but the Search box needs to be in alignment with the Highlighted Comic and Latest Artwork boxes)

You should still be able to keep the alignment if you move the search to a different column (as in the example above).

The reason why the search column is pushing down the comics is because it is laid out in the same row as the highlighted comic and the latest artwork. The way it's currently laid is like so . You need to lay it out as you describe in your second image : a left block and right block (just as in the jsfiddle example above).

You might find these two resources helpful as well:

• http://css-tricks.com/all-about-floats/
• http://www.barelyfitz.com/screencast/html-training/css/positioning/