Jump to content

HTML/ CSS help


Beginner(0000)
 Share

Recommended Posts

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

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

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

×
×
  • Create New...