Jump to content

HTML/ CSS help

Beginner(0000)

By Beginner(0000)
in HTML/XHTML

 Share

Recommended Posts

Beginner(0000) Newbie

Beginner(0000)

Posted
Posted (edited)

I am new and want to learn web Dev. this is my first try to develop layout  but somehow #right-section does not react with html/CSS. please help me out. Thank you. 

HTML<
div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="left-panel">
<div id="navbar"></div>
<div id="news"></div>
</div>
<div id="right-section"></div>
</div>
<div id="footer"></div>
</div>
CSS
#wrapper{
padding: 15px;
}
#header{
background-color: #000;
height: 100px;
-maz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
 
}
#content{
margin-top: 15px;
 
}
#content::after{
content:" ";
display: block;
clear: both;
}
#left-panel{
width:20%;
height: 400px;
float: left;
 
}
#navbar{
background-color: #e68800;
height: 400px;
-maz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
 
}
#news{
background-color: #b8b894;
height: 200px;
-maz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
margin-top: 15px;
}
 
#right-section {
background-color: #009999;
height: 615px;
-maz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 78,3%;
float:right;
 
 
}
#footer{
height: 100px;
background-color: #003333;
-maz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
margin-top: 15px;
}
 
Edited by Beginner(0000)
Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted

XcQfW3F.png

Try using the Code Block button to format your code here. This is so that the forum formatting processor doesn't pick up your code as formatting.

 

Onto the code at hand.

Your Right-section width is an invalid property value. Try width: 20%; and then see what you can get out of it.

Link to comment
Share on other sites
  • 2 months later...
ishan_shah Newbie

ishan_shah

Posted
Posted (edited)

Hello,
You have problem in CSS with width property. You should give px after width value i.e. 300px. You should follow following code.
  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrapper {
            padding: 15px;
        }
        #header {
            background-color: #000;
            height: 100px;
            -maz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
        }
        #content {
            margin-top: 15px;
        }
        #content::after {
            content: " ";
            display: block;
            clear: both;
        }
        #left-panel {
            width: 20%;
            height: 400px;
            float: left;
        }
        #navbar {
            background-color: #e68800;
            height: 400px;
            -maz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
        }
        #news {
            background-color: #b8b894;
            height: 200px;
            -maz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            margin-top: 15px;
        }
        #right-section {
            background-color: #009999;
            height: 615px;
            -maz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            width: 400px;
            float: right;
        }
        #footer {
            height: 100px;
            background-color: #003333;
            -maz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content">
            <div id="left-panel">
                <div id="navbar"></div>
                <div id="news"></div>
            </div>
            <div id="right-section"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

 

Edited by ishan_shah
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...