CODEWITHSUNDEEP
skeleton-css-boilerplate
tydek
tydek

Reputation: 31

How can I add two boxes in skeleton?

Hello I am having little problem with responsive design. I don't know how to add image on the left and text on the right.

I am working with Skeleton.

skeleton

What should I do ?

Update: Some Code

<section id="about">
    <div class="container">
        <div class="container">
            <div class="one_half ">
                <img class="picture-me" src="images/me.png" alt="">
                <!-- PICTURE SHOULD BE ON THE LEFT -->
            </div>
        </div>
        <div class="one_half last">
             <h2 class="name"> Borut</h2> 
            <p>I am pixel-perfect...</p>
            <img class="shadow" src="images/shadow.png" alt="" width="537" height="1">
            <img class="quote-right" src="images/quote-right.png" alt="" width="29" height="21">
            <img class="quote-left" src="images/quote-left.png" alt="" width="29" height="21">

Upvotes: 0

Views: 997

Answers (1)

KyleMit
KyleMit

Reputation: 29977

Look at the Skeleton Grid layout system

You have to declare the layout within a div of class container. Then add divs with the number of columns you'd like the to consume as classes. To place columns side by side, use classes alpha and omega.

<div class="container">
    <div class="twelve columns clearfix">
        <div class="six columns alpha">first block</div>
        <div class="six columns omega">second block</div>
    </div>
</div>

I added the following css to clarify the blocks

.alpha {
    background-color: red;
}
.omega {
    background-color: green;
}

This will render as follows:

enter image description here

See this fiddle to play around with the code a little

Upvotes: 1

Related Questions