CODEWITHSUNDEEP
htmlcss
Marko Karajlovic
Marko Karajlovic

Reputation: 153

Need CSS code for this kind of divs

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!

Upvotes: 1

Views: 117

Answers (4)

Lawrence Cherone
Lawrence Cherone

Reputation: 46620

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>

Upvotes: 0

sleepDrifter
sleepDrifter

Reputation: 591

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;
}

Upvotes: 3

user3671574
user3671574

Reputation: 3

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..

Upvotes: -1

Adnan j
Adnan j

Reputation: 119

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}

Upvotes: 0

Related Questions