I am trying to create a website,but the sidebar is not aligning to the main content of the website and is overlapping another div.
Link to the website http://www.inseeks.com/
.site-main .sidebar-inner {
margin: 6px auto;
position: absolute;
top: 0;
}
Try placing your .sidebar-inner inside your #content
<div id="content" class="site-content" role="main">
<div class="sidebar-inner">
Then float it to the right.
.sidebar-inner {
float: right;
//add necessary paddings or margins.
}
Remove the position: absolute; on .site-main .sidebar-container
Change width: 100%; to width: 300px;
Add float: right;
Add the following style to the css.
#primary
{
float: left;
}
That above should change so the sidebar will be on the left and no longer be overlapping the other content.
Related
Ok so on my webpage, I have a left navigation, the position if fixed and when i want to add my content on the index page, the content appears behind the navigation and does not start after it.
If I remove the fixed position then it just goes underneath.
Navigation CSS
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
position: fixed;
}
I even tried putting all the content inside a div but no luck.
Content DIV
#padding {
height: auto;
position: absolute;
right: 0;
Screenshots
Just put your content inside a div:
<div id="container">
<div id="nav">
<!-- your navbar markup -->
</div>
<div id="content">
<!-- your content -->
</div>
</div>
with css you can style your elements:
#container {
width: 100%;
}
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
#content {
width: 82%;
float: left;
}
With float: left your two divs appears aside.
NOTE:
If you don't want to put your content inside a div element, so just float your navbar element:
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
...that's all and all following content appears (if possible) on the right side of your navbar.
I would do margin-left:18%; or slightly higher on a container around your content. Then your content container will always be padded where the nav sits and will appear beside it.
On this page http://goo.gl/m2s1dA
I want to bring the whole header layer "header-container" as below on top of everything and anything inside of "container-site" should appear behind the header when scrolling.
Below is my code.
Full width div
.header-container {
position: fixed;
width: 100%;
z-index: 10000;
}
Fixed width div to center align header and some styling
.header-wrapper {
margin-bottom: -1px;
border-radius: 0;
border-bottom: 1px solid #cc6666;
height: 263px;
position: relative;
display: block;
width: 1140px;
margin: 0px auto;
}
Then body of the page
.container-site {
margin: 0px auto;
width: 1140px;
padding-top: 280px;
}
Currently only the headings (h1, h2, h3) are appearing behind the header. I am using Bootstrap.
From what I understand you want the header to be above all content and fixed to the top of page. In your code, the header-container is inside a fixed parent:
<div class="glass">
<div class="header-container">
...
</div>
</div>
what you have to do is simply add z-index to the parent of the header like this:
.glass { z-index: 1; }
This should fix your problem however, your header is transparent and that creates visual problems when text is under the header elements...
Header is on top but can't figure out it because it is transparent. give .header-container {background:#fff} and see how it looks like.
I am working on a small site. To make it easier to read I pushed all the content of the site into the center with.
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
The problem is that the div follows this rule and is only in the very center.
In the footer class I tried resetting the margins and width by setting them back to 100% but that didn't work.
.footer {
width: 100%;
margin-left: 0%;
margin-right: 100%;
}
CodePen
Instead of setting the entire body to 500px width, create a div for your main content, and then place the footer underneath.
#content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
<body>
<div id="content">
<!-- Main page content here -->
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
Either place the .footer element outside of the wrapper element:
Example Here
In this case, use an element other than the body to function as the wrapper/container. I used an element with class .container:
.container {
width: 500px;
margin-left: auto;
margin-right: auto;
}
As an alternative, you could also absolutely position the .footer element and add left: 0; right: 0; in order for it take up the entire width of the page:
Example Here
.footer {
position: absolute;
left: 0;
right: 0;
}
Try moving the css from your body into a containing <div> and put all your content in that and have your footer below the containing <div> and if the element is unique use ids not class
e.g.
HTML:
<body>
<div id="mainContent">
<!-- Main site stuff here -->
</div>
<div id="footer">
<!-- footer info here-->
</div>
CSS:
body{
/*No CSS*/
}
#mainContent{
width: 500px;
margin-left: auto;
margin-right: auto;
}
#footer {
width: 100%;
margin: 0;
}
I have the following (jsfiddle):
<div class="content_wrap">
<div class="left_container">
</div>
<div class="right_container">
<div style="background-color: blue; margin:20px; height: 1500px;"></div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
CSS:
body,html {
height: 100%;
width: 100%;
background-color: #f8f8f8;
}
div.content_wrap {
width: 100%;
height: 100%;
}
div.left_container {
float:left;
width: 220px;
height: 100%;
background-color: red;
}
div.right_container {
position: relative;
padding: 15px;
padding-top: 100px;
width: 1000px;
}
.clear { clear: both; }
​What I'm trying to do is line the divs side by side and have the left side bar (red) stretch to either the height of the page, or the height taken up by the content (which is in blue), which ever is greater (like the layout shown here)
My problems at the moment are:
The content of the right container (The blue box is just to illustrate content) does not align properly next to the left container
The left container doesn't adjust its height according to the content of the right container.
I've put in a clear fix, although to be quite honest, I don't completely understand how that works.
Would appreciate some guidance.
See this demo: http://jsfiddle.net/PaJ3r/9/
Here is updated CSS for it:
body,html {
height: 100%;
width: 100%;
background-color: #f8f8f8;
}
div.content_wrap {
width: 100%;
position: relative;
}
div.left_container {
float:left;
position:absolute;
width: 220px;
height: 100%;
background-color: red;
}
div.right_container {
position: relative;
padding: 15px;
margin-left: 220px;
padding-top:100px;
width: 1000px;
}
.clear { clear: both; }
position:relative in div.content_wrap is needed in order to get left sidebar stretched to the height of content.
position:absolute; in div.left_container allows left container to fit height of wrapper div.
In div.right_container there is margin-left: 220px; which leave left sidebar visible
Please take a look at this jsfiddle.
So few remarks: I used float: left; on both divs and also, as bart said, you didn't use the correct name for clearfix.
First you should nest your div's so that the left div can grow with the right one.
See updated fiddle
For the left div not set the height, but the min-heigth to 100%. Furthermore you need to play around with margins and paddings to get the last bit ok
I have this following chunk of my page.
Style:
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}
And example HTML:
<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>
When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?
Surround your two divs with a "wrapper" div like so:
<div id="wrapper">
<div class="featuredcontainer">content</div>
<div class="lessonnavcontainer">menu</div>
</div>
Then to center them, add margins to the wrapper:
#wrapper { margin: 0px auto; }
Then to have the two divs be side by side, add a float:
.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }
In order for the centering to work, you need to declare a width on the wrapper:
#wrapper { width: 800px; }
Put both the nav and the featured containers into another wrapper div.
HTML
<div class='wrapper'>
<div class="navcontainer">
menu
</div>
<div class="featuredcontainer">
content
</div>
</div>
And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.
CSS
.wrapper{
width:752px;
margin: 0 auto;
overflow:auto;
}
.featuredcontainer {
width: 450px;
height: 700px;
float:left;
border: 1px groove grey;
}
.navcontainer{
float:left;
height: 600px;
width: 300px;
background:#ff0;
}
JSFiddle http://jsfiddle.net/5w5SC/
Use the float property. Using float, css can position divs next to each other horizontally.
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}
Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.
To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/
Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.