css - Html sidebar is overlapping content area -
i'm trying make website layout this:
|----------------------------| | header | |----------------------------| | s | | | | | | d | | | e | | | | | |_____| mainn | | | | | | | | | | | | | |----------------------------| but content area text going underneath side section when want go around it. don't understand why doing this, , great if tell me why it's happening , can fix it.
css:
.menuebar { position: absolute; left:178px; top:92px; right:0; bottom:0; } .mainn { position: absolute; left:178px; top:92px; right:0; bottom:0; margin: 0 auto; padding-left: 200px; padding-right: 200px; max-width: 80px; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 16px; line-height: 1.5em; color: #545454; background-color: #ffffff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); } .side { text-align: center; } .side > headers { font-family: "trebuchet ms", helvetica, sans-serif; text-align: center; } .side > bar { position:absolute; left:30px; top:430px; bottom: 0; width: 240px; border-radius: 10px; background-color: #0e83cd; padding-left: 20px; padding-right: 20px; } html:
<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>antrush-home</title> <meta name="author" content="ant" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/nav/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/nav/demo.css" /> <link rel="stylesheet" type="text/css" href="css/nav/component.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <script src="js/nav/modernizr.custom.js"></script> </head> <body> <div class="container"> <section class="color-4"> <nav class="cl-effect-2"> <a href="index.html"><span data-hover="start">home</span></a> <a href="contact.html"><span data-hover="buy">contact</span></a> <a href="#"><span data-hover="pictures">galary</span></a> <a href="#"><span data-hover="play">creativity lab</span></a> </nav> </section> </div><!-- /container --> <div class="side"> <bar> <nav class="cl-effect-2"> <a href="index.html"><span data-hover="info">news</span></a> </nav> <h4>some testing text</h4> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. ut semper euismod nulla quis mattis. donec ac elit id arcu ullamcorper bibendum id massa. praesent eget blandit metus. sed finibus nisl ac purus cursus, sed dapibus sem dapibus. suspendisse gravida metus non posuere auctor. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; phasellus lobortis risus non libero eleifend aliquam eu in augue. phasellus pellentesque nisl id lectus porta, convallis dui varius. in et gravida</p> </bar> </div> <center> <h1>welcome</h1> <div id="mainn"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. ut semper euismod nulla quis mattis. donec ac elit id arcu ullamcorper bibendum id massa. praesent eget blandit metus. sed finibus nisl ac purus cursus, sed dapibus sem dapibus. suspendisse gravida metus non posuere auctor. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; phasellus lobortis risus non libero eleifend aliquam eu in augue. phasellus pellentesque nisl id lectus porta, convallis dui varius. in et gravida. </p> <p>enjoy stay,</p> <p>-ant</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. ut semper euismod nulla quis mattis. donec ac elit id arcu ullamcorper bibendum id massa. praesent eget blandit metus. sed finibus nisl ac purus cursus, sed dapibus sem dapibus. suspendisse gravida metus non posuere auctor. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; phasellus lobortis risus non libero eleifend aliquam eu in augue. phasellus pellentesque nisl id lectus porta, convallis dui varius. in et gravida ligula, @ rutrum sapien. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. sed ultrices nulla id enim interdum, @ tincidunt diam vestibulum. sed nec velit eget ex semper blandit. ut tempus ornare maximus. nunc tempor felis sit amet velit porttitor, eget interdum dui interdum. cras nec gravida turpis. morbi malesuada dui metus, vel aliquam augue tristique ac. nam in erat @ tortor gravida finibus. sed ullamcorper imperdiet tellus. nulla scelerisque lacinia mi, sed feugiat tellus consectetur sed. fusce molestie quam et faucibus pellentesque. suspendisse vel neque in ex placerat placerat. phasellus congue accumsan feugiat. integer tincidunt dignissim enim, non ornare sapien volutpat ac. morbi tincidunt felis in libero elementum porttitor. suspendisse faucibus venenatis suscipit. morbi lacinia ac nibh in egestas. curabitur accumsan mauris egestas purus efficitur rutrum. praesent maximus semper quam vel faucibus. maecenas vel vehicula ipsum, eu tempor purus. donec elementum vitae dui eu sodales. ut eleifend erat non orci finibus, eu semper augue pharetra. vivamus tortor dolor, faucibus id tincidunt congue, tempor @ sem. pellentesque mattis sapien ac sapien gravida consequat. suspendisse porttitor pellentesque ipsum non rhoncus. sed vestibulum nulla sed convallis condimentum. phasellus posuere dolor vitae nulla bibendum cursus ac eleifend lacus. aliquam tempor in neque quis dictum. mauris sed sapien vel lorem vestibulum facilisis. fusce vulputate nulla non augue tempus commodo. praesent elementum leo vel ultricies vulputate. mauris @ ipsum pharetra, vehicula tellus vel, pretium metus. ut aliquet semper augue eu efficitur. sed risus arcu, cursus et est nec, semper auctor ligula. nulla convallis elit sodales mi pharetra, vel congue sapien euismod. duis vehicula imperdiet ultrices. nunc condimentum, nulla ac ultrices ultricies, augue leo malesuada massa, in porttitor nisi tortor eu enim. curabitur varius dolor ex, sit amet sagittis libero bibendum in. duis et pulvinar nulla. donec interdum id ligula ornare. vivamus elementum egestas fermentum. in pulvinar semper nibh porttitor. nulla facilisi. proin leo mauris, finibus nec rutrum eu, egestas eget metus.</p> </div> </body> </html>
your question rather vague i'll post couple interpretations
https://jsfiddle.net/7daffjh8/3/
.side{ width:20%; background-color:lightyellow; padding:20px; margin-right:20px; float:left; } https://jsfiddle.net/7daffjh8/4/
.side{ width:20%; background-color:lightyellow; padding:20px; display:inline-block; float:left; } .content{ width:80%; padding:20px; display:inline-block; } https://jsfiddle.net/7daffjh8/6/
.main{ position:absolute; width:100%; height:100%; } .side{ width:20%; background-color:lightyellow; padding:20px; display:inline-block; position:absolute; left:0; top:0; bottom:0; } .content{ width:80%; padding:20px; display:inline-block; position:absolute; top:0; right:0; bottom:0; }
Comments
Post a Comment