Needing some help on Creating a boxed area using css codes

Discussion in 'CSS' started by london12, Aug 15, 2012.

  1. #1
    Hello
    I am trying ( hoping) to create my website and have a few questions regarding layout and styling. I want to have boxes i created appear side by side or in a row. i have created boxed area on my page and i have done most of the code apart from aligning the boxes in a row and where to put font stlying code.

    the code i have is :

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div.ex
    {
    float:left;
    width:300px;
    height:200px;
    padding:10px;
    border:1px solid grey;
    margin:5px;
    margin-top:0px;

    webkit-border-radius: 30px;
    moz-border-radius: 30px;border-radius: 30px;background-color:#F0EEED;
    }
    </style>
    </head>

    <body>
    <img src="250px.gif" width="250" height="1" /><br /><br />

    <div class="ex">A & P facilities.<br />
    </div>

    <html>
    <head>
    <style type="text/css">
    div.ex
    {
    float:left;
    width:300px;
    height:200px;
    padding:10px;
    border:1px solid grey;
    margin:5px;
    margin-left:350px;

    webkit-border-radius: 30px;
    moz-border-radius: 30px;border-radius: 30px;background-color:#F0EEED;
    }
    </style>
    </head>

    <body>
    <img src="250px.gif" width="250" height="1" /><br /><br />

    <div class="ex">A & P facilities.<br />
    </div>


    my goal is to have one large box with three smaller boxes inside the main box. please advise on how i can achive this by adding codes to the above code. A
    All help is much much appreciated.
     
    london12, Aug 15, 2012 IP
  2. yho_o

    yho_o Well-Known Member

    Messages:
    354
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    #2
    i dunno what is the exact problem you've, but i may help you creating your layout (1 big box and 3 small boxes inside it aligned to left)

    here you are

     
    Last edited: Aug 15, 2012
    yho_o, Aug 15, 2012 IP
  3. london12

    london12 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks. the smaller boxes should contain my text content, how do achieve this?
     
    london12, Aug 16, 2012 IP
  4. yho_o

    yho_o Well-Known Member

    Messages:
    354
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    #4
    simply place your text content between <div class='small-box'> AND </div>

    like this

     
    yho_o, Aug 16, 2012 IP