Reputation: 20100

CSS beginner, help creating this layout?

In the image below, on the left is the output of my html/css, on the right is what I would like the layout to look like.

I'm pretty clueless as to:

how to Center the header
why the 'upper right' text and button are being forced to the next line by the header (as opposed to orienting in the upper right
how to align the text area so that it is to the right of the image

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="outer_border">
            <div class="inner_border">
                <!--just use a div to represent the image -->
                <div class ="image">
                </div>
                <span class="upper_left_text">
                    upper left
                </span>
                <span class ="header">
                    <h2>
                        Header
                    </h2>
                </span>
                <span class="upper_right_text">
                    upper right
                </span>
                <button class="button1">Button</button>
                <textarea class="text_area">Text Area</textarea>
                <button class="button2">Button 2</button>
            </div>
        </div>
    </body>
</html>

.outer_border {
    border: 1px solid black;
    width: 600px;
    height: 500px;
}

.inner_border {
    border: 3px solid black;
    width: 400px;
    height: 300px;
    float: right;
}

.image {
    border: 1px solid black;
    display: inline-block;
    width: 50px;
    height: 100px;
    margin: 5px;
    float: left;
}



.the_header {
    text-align: center;
    display: inline-block;
}

.button1 {
    float: right;
}

.button2 {
    float: right;
    width: 80px;
    height: 60px;
}

.text_area {
    clear: both;
    display: block;
    width: 100%;
    height: 150px;
    margin: 5px;
    /*I have no idea how to position this*/
}

.upper_left_text {
    float: left;
}

.upper_right_text {
    float: right;
}

enter image description here

Upvotes: 0

Answers (4)

Four_lo

Reputation: 1150

Here is another fiddle that uses the "calc" operation to set the textarea the remaining width of the div.

Here is the fiddle http://jsfiddle.net/SteveRobertson/tyokk1qj/

I wrap this image in and set the height to 100% and then modify the rest of the elements to the right use CSS

.outer_border {
 border: 1px solid black;
 width: 600px;
 height: 500px;
}

.inner_border {
 border: 3px solid black;
 width: 400px;
 height: 300px;
}
#tall{
 height:100%;
 float:left;
}
.image {
 border: 1px solid black;
 display: inline-block;
 width: 50px;
 height: 100px;
 margin: 5px;
 float: left;
}
.the_header {
 text-align: center;
 display: inline-block;
}
h2 {
 display:inline;
}

.button1 {
 float: right;
}

.button2 {
 width: 80px;
 height: 60px;
 display: block;
 float:right;
}

.text_area {
  clear: both;
  display: inline;
  width:auto;
  height: 150px;
  margin-right: 0;
}

.upper_left_text {
 float: left;
}

.upper_right_text {
 float: right;
}

.text_area{
  width:calc(100% - 70px);
}

Upvotes: 1

Pevara

Reputation: 14308

The key lays in treating your layout as a layout with 2 columns. I believe the markup should look something like this:

<div id='demo'>
    <div class='col1'>
        <img src='http://www.placehold.it/50x100' />
    </div>
    <div class='col2'>
        <div class='header'>
            <span class='left'>left</span>
            <span class='right'>
                <button>button</button>
                right
            </span>
            <h2>center</h2>
        </div>
        <textarea>Lorem ipsum</textarea>
        <button>button</button>
    </div>
</div>

to achieve the result in your image, you should add the following css:

#demo {
    border: 2px solid black;
    padding: 10px;
}
#demo .col1, #demo .col2 {
    display: inline-block;
    vertical-align: top;
}
#demo .col2 {
    width: calc(100% - 60px);
}
#demo .left {
    float: left;
}
#demo .right {
    float: right;
}
#demo .header {
    text-align: center;
}
#demo textarea {
    width: 100%;
    min-height: 100px;
    margin: 8px 0;
}
#demo button {
    float: right;
    margin-left: 8px;
}

Note that I've used as little fixed dimesions as possible. Just cause it will make your layout adapt easier to different content and different screen sizes.

I've put your code next to my proposal in a fiddle. I think the code should be fairly easy and self explanatory, but feel free to ask if anything isn't clear.

Upvotes: 1

Alvaro Menéndez

Reputation: 9032

well, Your code was wrong in many lvl's. I have fixed it to look like in your image... but it's just a fix. Maybe not what you are looking for.

As a resume: You want a container with an image looks like a column and the rest of the html stay as another column.

Then, as you did, the image container is floating left with a fixed width of 50px but we have to add 10px more as you have given the container 5px margin (5px right and left = 10px),

Then I just add a container which will take the rest of the html. THen it's easy to give the container a float left and as its width 340px so the total of your layout is, as you want, 400px.

I have added both box-sizing: border-box; to make the border be inside the containers and not messing with the fixed widths.

Then I just have added .header {float:left;} as basically ion your code you have a class named the_headerwhich is not even used in the html. and then a bit of margin to the h2 to separete it from upper left

here you have the fiddle

Upvotes: 1

Medda86

Reputation: 1630

I made a jsfiddle, check this one, should get you started :)

https://jsfiddle.net/fazbyxyq/

html5

<div class="right">
    <div>upper left</div>
    <div>header</div>
    <div>upper right</div>
    <div><textarea>textarea</textarea></div>
    <div>button2</div>
</div>

css3

*{
box-sizing:border-box;
-moz-box-sizing:border-box;
}

.left{
    float:left;
    width:10%;
    height:100px;
    border:1px solid #000;
}

.right{
    float:left;
    width:89%;
    margin-left:1%;
}

.right div{
    float:left;
    width:33%;
    border:1px solid #000;
}

.right div:nth-child(2){
    text-align:center;
}

.right div:nth-child(3){
    text-align:right;
}

.right div:nth-child(4),.right div:nth-child(5){
    width:99%;
    border:0;
}

.right div:nth-child(4) textarea{
    width:100%;
    height:100px;
    margin:10px 0;
}

.right div:nth-child(5){
    text-align:right;
}

Peace out!

Upvotes: 2

CSS beginner, help creating this layout?

Answers (4)

Related Questions