Need CSS code for this kind of divs

Question

I need css code for this kind of site:

SITE LOOK

And with my code I get this:

SITE FOR NOW

This is my code of index page:

<html>

<head>

<link type="text/css" rel="stylesheet" href="index.css"/>

    <title>
        Home Page
    </title>

</head>

<body>

    <div id=header>

    <h1>THIS IS HEADER</h1>

    </div>

    <div id=account>

    THIS IS ACCOUNT<br>
    oasdjasdj<br>
    asdkasd<br>
    asdpasod<br>
    </div>

    <div id=navigation>

    THIS IS NAVIGATION

    </div>

    <div id=content>

    THIS IS CONTENT

    </div>

    <div id=right_side>

    THIS IS RIGHT SIDE

    </div>

    <div id=footer>

    THIS IS FOOTER

    </div>

</body>

This is css file:

    h1{
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #acd1b2;
}

#header{
    margin : 0px;
    position: relative;
    width:80%;
    background-color: red;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#navigation{
    margin : 0px;
    width:80%;
    background-color:blue;
}

#right_side{
    width: 20%;
    float: right;
    background-color: #green;
}

#footer{
    clear: both;
    position: relative;
    width:80%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: gray;
}

#account{
    position: relative;
    width: 20%;
    float: right;
    background-color: #yellow;
}

#content{
    width:80%;
    float:left;
    background-color:#black;
    color: white;
}

Please if someone know how to position divs like on my first picture. When I try something I always get strange results. Thanks for help!

Maybe not what you're looking for, but you can always add some tables into it to put parts on "the same row". There are several ways of doing this (even by mixing it with your current method). Just my thought. Also, your "left_side" is on the right side. — Max, Jul 11 '14 at 00:20
Your missing `"` for properties, doctype in your html, the css has invalid background values, remove the `#` for word based colors. Any your not applying height properties so the divs will collapse. — Lawrence Cherone, Jul 11 '14 at 00:21
You should look into wrapping your divs into 'containers' For your example I'd suggest a left side wrapper and a right side. Within them you'd have the corresponding divs. Right wrapper would have account and the `right-side` div. Within the main `left` wrap, you can have smaller containers which, for example, would hold the `header` and `navigation` divs. This'll help you organize your divs and make it much more manageable — Rook, Jul 11 '14 at 00:26
@Max - using tables purely for layout purposes is strongly discouraged. Tables should only hold tabular data. If you need rows, create an outer div that holds the inner divs to create a row-like appearance — Mike Koch, Jul 11 '14 at 00:30
@Mike K I'll have to disagree with that - It entirely depends on the context. I find nothing wrong with using tables to create a well-formatted login-form, for instance, and it's fully layout-related. This is mainly a matter of opinions, and all I did was bringing up an opportunity. Though I do agree with the fact that using containers fits better in this case, I don't think using tables only for tabular data is necessary. — Max, Jul 11 '14 at 00:32
@Max by disagreeing with @Mike K you're disagreeing with the basics of Web Semanitcs... i.e. using HTML Tags for the prupose they were designed for. Also you are locked in to table design on the HTML side with less emphasis on CSS. It is CSS that should be used. predominanlty for design **NOT** html. If you're using `tables` for a simple log in form, you're doing it wrong, you achive the same result with less HTML without tables. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Jon P, Jul 11 '14 at 00:44
@JonP I do see your point in that, actually. The way I've learned is that using it is fine (and I have seen it in several occasions), though I do realize that it has another original meaning. But really though, I would be careful before blatantly calling a method wrong, as it's a mere question about opinions (even if it now originally is meant for something else). Regardless, let's end this discussion here - it doesn't even matter in the context. — Max, Jul 11 '14 at 00:48
@Max Using tables was a method for when CSS did not work well. CSS now works well and tables should never be used for layout among many other reasons beyond the purpose of the comment section. It is not an opinion. — Rob, Jul 11 '14 at 01:12
@Rob It is indeed an opinion (and it slowly starts to feel like this is a close-minded discussion)... I don't care how much you are against having tables, as long as it's possible, having it or not is questionable. If your statement now is true (about the opinion), then kindly explain to me how I can tell that something is "wrong" and "right", and who decides it. To me, something wrong shouldn't work properly on the site; the rest is up to discussion. Maybe they are "unwritten" rules, but just because of that, don't treat them like real ones in arguments (Couldn't resist responding.) — Max, Jul 11 '14 at 08:06
@Max First, read the spec: http://developers.whatwg.org/tabular-data.html#the-table-element "Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming..." — Rob, Jul 11 '14 at 14:22
@Rob Thanks for the resource, but I still stand my point about opinions (perhaps it's a misuse, but it doesn't have to be wrong according to all). In this case though, the arguments against using it for layout has been strong enough to convince me :) — Max, Jul 11 '14 at 15:57

sleepDrifter · Accepted Answer · 2014-07-11T00:57:35.970

Alright, there were a few problems with the way that you wrote your HTML. First, ID tags should always have quotations around the ID name. I would just make a container div, a div for the left, and a div for the right side.

I made a demo that uses floats to control the layout. The divs are contained in a large div that is restricted to 800 pixels.

Here's the demo that I made on JS Bin

HTML:

<body>
    <div id="container"> <!-- Make a container to hold everything. Centered in CSS -->
        <div id="left-side">

            <div id="header">Header</div>
            <div id="navigation">Navigation</div>
            <div id="content">Content Here</div>
            <div id="footer">Footer</div>

        </div> <!-- End of the left side div -->


        <div id="right-side">

            <div id="account">Account</div>
            <div id="right_side">Right Side</div>

        </div> <!-- End of the right side div -->
    </div>  <!-- End of the container div -->

</body>

CSS:

*{
  font-family:sans-serif;
}

#container{
  max-width:800px;
  margin: 0 auto;
}

#left-side{
    float:left;
    width:60%;
  }

#right-side{
  float:right;
  width:37%;
}

#left-side div{
  text-align:center;
  margin-bottom:10px;

}
#right-side div{
  text-align:center;
  margin-bottom:10px;
}

#header{
    background-color: yellow;
  text-align:center;
  padding:20px 0px;
}

#navigation{
  padding:10px 0px;
  border: 1px black solid;
}

#right_side{
    background-color: cyan;
    padding:50px 0px;
}

#footer{
    background-color: gray;
    padding:5px 0px;
}

#account{
    background-color: green;
  padding: 10px 0;
}

#content{
    background-color:black;
    color: white;
    padding:100px 0px;
}

score 0 · Answer 2 · answered Jul 11 '14 at 00:32

Change HTML as follow because you need container divs:

<head>

<link type="text/css" rel="stylesheet" href="index.css"/>

    <title>
        Home Page
    </title>

</head>

<body>
<div class="left_container">
    <div id=header>

    <h1>THIS IS HEADER</h1>

    </div>

    <div id=account>

    THIS IS ACCOUNT<br>
    oasdjasdj<br>
    asdkasd<br>
    asdpasod<br>
    </div>

    <div id=navigation>

    THIS IS NAVIGATION

    </div>

    <div id=content>

    THIS IS CONTENT

    </div>



    <div id=footer>

    THIS IS FOOTER

    </div>

</div>
<div class="right_container">
 <div id=right_side>

    THIS IS RIGHT SIDE

    </div>
</div>

</body>

in CSS file add also

.left_container{float:left;width:80%;margin:0px}
.right_container{float:left;width:20%;margin:0px}
.clr{clear:both}

Lawrence Cherone · Answer 3 · 2014-07-11T01:04:03.663

Something like this perhaps?, learn about CSS class'es there reusable (incase you might want multiple right side box's and it will shorten the CSS code because you dont need to create a selector for every element.

Pictures are always a good selling point ;p

Copy and paste source - change to suit...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
    margin:0;
    padding:0;
}

#wrapper {
    width:800px;
    height:100%;
    margin:0 auto;
}

#wrap-left {
    width:75%;
    height:100%;
    float:left;
}

#wrap-right {
    width:25%;
    height:100%;
    float:right;
}

#header,#navigation,#footer,.right-small {
    height:45px;
    margin:10px;
}

#content,.right-tall {
    height:230px;
    margin:10px;
}

.round-corners {
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    border-radius:25px;
    padding:20px;
}

.bg-yellow {
    background:#FEF200;
}

.bg-red {
    background:#ED1B24;
}

.bg-blueish {
    background:#3F47CC;
}

.bg-green {
    background:#23B14D;
}

.bg-grey {
    background:#C3C3C3;
}

.border {
    border:5px solid #000;
}

</style>
</head>

<body>

    <div id="wrapper">

        <div id="wrap-left">
            <div id="header" class="bg-red round-corners">
                <h1>THIS IS HEADER</h1>
            </div>

            <div id="navigation"  class="bg-blueish round-corners">
                THIS IS NAVIGATION
            </div>

            <div id="content" class="border round-corners">
                THIS IS CONTENT
            </div>

            <div id="footer" class="bg-grey round-corners">
                THIS IS FOOTER
            </div>
        </div>

        <div id="wrap-right">
            <div class="right-small bg-yellow round-corners">
                ACCOUNT
            </div>
            <div class="right-tall bg-green round-corners">
                left side
            </div>
        </div>

    </div>

</body>
</html>

score -1 · Answer 4 · answered Jul 11 '14 at 00:46

-1

why no use a table

<body>
<table width="100%" cellspacing=5 cellpadding=5 border =0 >

    <tr><td bgcolor=red width="80%" height=200px> header </td> <td bgcolor=yellow>account</td> </tr>
    <tr><td bgcolor=blue height=100px> navigation </td> <td bgcolor=green rowspan=2>Left side</td> </tr>
    <tr><td bgcolor=cyan height=400px> content </td></tr>
    <tr><td bgcolor=grey height=100px> footer </td></tr>


</table>
</body>

you don't need css for that..

answered Jul 11 '14 at 00:46

user3671574

3
1
5

Because tables should not be used for layout. Ever. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Jon P Jul 11 '14 at 00:48

Need CSS code for this kind of divs

4 Answers4