Jump to content
Beginner(0000)

HTML/ CSS help

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)

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...