CODEWITHSUNDEEP
css
lzam
lzam

Reputation: 185

Aligning text differently when columns are stacked vs side by side

I am trying to create a page layout with a header that needs to include 2 pieces of in information (which I have placed in two divs). On wider screens, I want to align one block to the left, and one to the right, but on smaller screens, I want to stack both blocks, and center all of the text.

So far, however, I have been unable to accomplish both of these goals. Is this even possible without resorting to JavaScript?

Here is the HTML I have so far: 

 <div class="container">
    <div class="left">
        Text on the left
    </div>
    <div class="right">
        Text on the right
    </div>

And the CSS:

.container {
        padding: 0px;
    }
    .left {
        display: inline-block;
        float: left;
        text-align: center;
    }
    .right {
        display: inline-block;
        float: right;
        text-align: center;
    }

I know that the float: left and float: right are what prevents the text from centering when stacked, but I don't know how else to make sure that the left and right blocks end up in the corners when they are not stacked.

Upvotes: 0

Views: 34

Answers (2)

hungerstar
hungerstar

Reputation: 21725

It's a little hard to give a concrete answer as the question doesn't demonstrate the actual desired layout but is more general in its requirements. With that said, here's what I suggest.

I would set a width on your .left and .right DIVs along with using media queries to adjust for stacking behavior. I have two examples below.

1)

In this example both .left and .right are set to width: 50%. You could change it up to 40%/60% or whatever. The main takeaway here is they're both floated to the left so the widths will have to equal 100%;

<div class="container">
    <div class="left">
        Text on the left.
    </div>
    <div class="right">
        Text on the right.
    </div>
</div>

.container {
    text-align: center;
}    
@media (min-width: 400px) {
    .left,
    .right {
        float: left;
        width: 50%;
    }
}

jsFiddle: http://jsfiddle.net/00ap8rnn/

2)

.container {
    text-align: center;
}
@media (min-width: 400px) {
    .left {
        float: left;
        width: 30%;
    }
    .right {
        float: right;
        width: 15%;
    }
}

In this example both DIV widths do not have to equal 100% and one is floated to the right and the other floated to the left.

jsFiddel: http://jsfiddle.net/00ap8rnn/1/

Upvotes: 2

Paul G
Paul G

Reputation: 847

I would use a media query to change the css at smaller screen widths. Ie, you could just change the .right div to float left instead at smaller screens widths: 

@media (max-width: 600px){
    .right{
        float:left;
    }
}

Upvotes: 1

Related Questions