Since centring my blog content my right hand sidebar has fallen down below my content.
How can I bring it back it up so it sits to the right of my page? (Between the right side border and the edge of the page).
Live link:
https://www.moneynest.co.uk/how-to-choose-a-broker/
Code:
<html>
<body class="post-template-default single single-post postid-594 single-format-standard logged-in admin-bar no-customize-support nolayout windows chrome override" itemscope itemtype="http://schema.org/WebPage"><div class="site-container">
<div class="site-inner">
<div class="content">
<div id="container">
<div class="central-container">
<div class="middle-content">
<div class="inner-post-head">
</div>
<div class="data-content">
<!--MAIN CONTENT HERE -->
</div><!-- End .middle-content -->
</div>
</div><!-- End #container -->
</div><!-- End #content -->
<aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"><h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2><section id="text-9" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget">
<!--SIDE BAR CONTENT HERE--></div>
<!--<div id="popular-articles">
<p class="popular-articles-text">Popular articles</p>
</div>-->
</div>
</div>
</div>
<section id="text-10" class="widget widget_text"><div class="widget-wrap"
</div></section>
</div>
</aside>
<!--END OF SIDEBAR--!>
<!--FOOTER STUFF-->
</body>
</html>
Running Wordpress with custom Genesis theme and Bootstrap.
Your style sheet is having below code
.site-inner, .wrap {
max-width: 1200px;
}
As you have centered your contents with margin-left, this 1200px is not enough to hold your sidebar. SO please change that to below one so that it will work for you
.site-inner, .wrap {
max-width: 100%;
}
Method 2:
Make your content part centralized through out and make your sidebar positioned to right side. Style as follows:
.site-inner{
position: relative;
}
.content {
width: 792px;
margin: 0 auto !important;
float: none;
}
.sidebar-primary {
position: absolute;
width: 240px !important;
right: 0px;
top: 0px;
}
position: fixed;
right: 0;
top: 0;
or instead make it thinner (width:80%) and give the content display: inline
As well as removing the left margin from .content, I'd also recommend removing padding from .site-inner and adding margin:0 auto;.
I tested in your page and did this. It is working. Just decrease your margin-left property in relative media queries.
#media only screen and (min-width: 1200px)
(index):27
.content {
margin-left: 10%;
}
Related
I am building a webpage that is divided into 3 sections, a header, a content area and a footer. Each marked up by a div and they all belong to a wrapper div.
<div class="wrapper">
<div class="header">
<div id="logo">
<img id="headerimg" src="assets/media/logos/Full_H.png" />
</div><!-- End of logo -->
<div id="navigation">
<ul>
<li>navigation1</li>
<li>navigation2</li>
</ul>
</div><!-- End of navigation -->
</div><!-- End of header -->
<div class="container">
<p>This is a container.</p>
</div>
<div class="footer">
<p>This is a footer.</p>
</div>
</div> <!-- End of wrapper-->
The styling rules are as follows:
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
/*width: 96%;*/ /* Holding outermost DIV */
}
#header {
/* margin-bottom: 10p;*/
width: 940px;
height: 80px;
outline:green dashed;
}
#logo {
height: 60px;
width: 100%;
outline:blue dashed;
} /*logo - End*/
I am trying to fit the image, Full_H.png, to the top left corner of the page without losing aspect ratio and confined to the header div only. The size of this image is 450 x 50, yet when I run this code the image is not confined to the header, it overflows. Can someone tell me how to contain the image to the size of the div without losing the image's quality? Thank you. Please let me know if my information is inadequate.
I do not know how is that space coming. I do not want fixed footer but only want fixed navbar. My navbar is working fine but footer is having some white space below it.
body {
padding-top: 4.5rem;
min-height:100%;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
left: 0;
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #000000;
}
This is the CSS for footer. I am using Bootstrap 4.
<body>
<div class="container-fluid">
<nav ..... #code for navbar
</nav>
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
~~~~MY CONTENT~~~
</div>
</div>
</div>
<div class="row">
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer></div>
</div>
</div>
However, when I change the CSS to position:fixed. It works fine but I do not want that. Thank you in advance.
Your content element's height is not the screen's height. Therefore your footer will be like that, you can do it with JavaScript or just put content in your container.
I'm trying to create a footer that stays below the page content and sticks to the bottom of the page. I've tried applying Twitter Bootstrap 3 Sticky Footer to my page, but it causes the footer to stick to the bottom and overlap the page content (if the page is too short).
I'm currently using the css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 348px;
}
and the html: (simplified)
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container"
page content
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<!-- Footer-->
</footer>
</body>
and the footer is now sticking to the bottom, but when the page is very narrow, you can see through to the background instead of the footer background covering it.
Image
Any help in resolving this would be greatly appreciated.
Seeing that you have used jQuery. Along with removing the height from footer, a simple resize() event can decide the correct margin-bottom.
$(window).resize(function(){
var xHeight = $('.footer').height();
$('body').css('margin-bottom',xHeight + 'px');
})
Hope this helps
Problem is with the height. Just remove the height from footer then it will be fine.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
<!----html---->
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container">page content</div>
</div>
<footer class="footer navbar-fixed-bottom"></footer>
</body>
I'm designing a webpage, but I'm a total HTML/CSS newbie. I want the following format:
A top half, and a bottom half.
The top half contains 6 big boxes, organized into two columns of 3 boxes.
The bottom half contains some other content, whatever I want.
Right now I (somehow) have it working, but the only thing is the "bottom_half" is too close to the "top_half" -- I just want to add a bit more of a margin in between. But when I tried doing that weird things would happen and I don't understand what I'm doing wrong.
Here's an outline of my html layout:
<div class="top_half">
<div class="left_half">
<div class="big_box">
<!-- box 1 content -->
</div>
<div class="big_box">
<!-- box 2 content -->
</div>
<div class="big_box">
<!-- box 3 content -->
</div>
</div> <!-- left-half -->
<div class="right_half">
<div class="big_box">
<!-- box 4 content -->
</div>
<div class="big_box">
<!-- box 5 content -->
</div>
<div class="big_box">
<!-- box 6 content -->
</div>
</div> <!-- right-half -->
</div> <!-- top-half -->
<div class="bottom_half">
<!-- bottom-half content -->
</div>
My CSS for top and bottom half look like this:
.top_half {
height: auto;
width: auto;
margin-top: 70px;
padding-top: 70px;
background: lightgreen
}
.bottom_half {
height: auto;
width: auto;
margin-top: 70px;
padding-top: 70px;
background: lightyellow;
}
Oddly, the top_half div is just a pretty tiny bar at the top of the page, and bottom_half div is taking basically the entire page.
Is my layout bad? Should I be doing it differently? I really have no experience with this at all, so I'm learning as I go along.
Thanks!
EDIT:
Fixed some typos. Take a look at this to see what I mean: https://jsfiddle.net/d7ejv3ad/3/
^^ why aren't the grey boxes staying inside the green bar???
Demo: https://jsfiddle.net/d7ejv3ad/
HTML
<main>
<div>
<div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
<div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
</div>
<div>
Content
</div>
</main>
CSS
main > div:first-child {
height: 50vh;
width: auto;
background: lightgreen
}
main > div:first-child > div { display: inline-block; height: 100%; width: 49%; }
main > div:first-child .boxes {
margin: 2.5% 0 0 2.5%;
width: 28%;
height: 28%;
background: #fff;
}
main > div:last-child {
height: 50vh;
width: auto;
padding: 50px;
background: lightyellow;
}
there is a typing error in second line of HTML code <div class="left_half> this should be like <div class="left_half">
additionally add this one line in your CSS
.big_box{display:inline;}
I have implemented this sticky footer for Bootstrap 2.3.2 on my site but am running into an issue on a page that has short content here. There is too much space between the content and the footer, as well as an inconvenient scrollbar. Is there a way to prevent the huge gap in space and the scroll bar on a short page with short content?
I am using this code to generate the sticky footer.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}
#push{
height: 150px;
}
#footer{
background-color: #3BC1CD;
height: 150px;
}
Following Bootstrap example, simply move your #push div in the #wrap div :
<div id="wrap">
...
<div id="push"></div>
</div><!-- #wrap -->
<div id="footer">
...
</div>
It's not giving the desired result because the #push div is outside of the wrapper div.
In your html you have :
<div id="wrap"></div>
<div id="push"></div>
<div id="footer"></div>
in bootstrap they have :
<div id="wrap">
<div class="container">
<div id="push"></div>
</div>
<div id="footer"></div>
Just indent the #push inside the #wrap
Remove the height on <div id="push"> or remove it altogether. This is unnecessary.