I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.
Related
I'm trying to have some elements of design positioned absolutely relative to the page's background but not affecting the page layout (scroll and page height must remain dependent only on the page's contents).
Let say, placing two squares square1 and square2, potentially overflowing on the page's width and maybe below the page's contents.
I've played with the following HTML:
<div id="background">
<div id="inner">
<div id="square1">
</div>
<div id="square2">
</div>
</div>
</div>
<main>
<!-- main content goes here, can be arbitrary HTML -->
<canvas height="1000px" width="10" style="background:red;"></canvas>
</main>
Both with attempts at CSS position: absolute of the squares inside a position: relative background div and overflow: hidden on the inner div ; but also playing with only margin-based positioning, I always end up with the "background" overflowing below the main content. Are there alternatives approach to achieve what I'm trying to do ?
To be more explicit, on this JS fiddle https://jsfiddle.net/1ktfyna4/2/ I'm trying to have the page stop scrolling at the bottom of the red line, while still showing the top of the yellow rectange.
I made it simply using display: flex on the outward-most container, with both the content div and background div inside.
See https://jsfiddle.net/m8pk45re/1/
I'm using Bootstrap 3 and I'm trying to make a scrollable content DIV.
I have a grid with a left side navigation and a top bar and in the
middle I have the content that should be scrollable.
It works when I use a fixed height on the content div...but I want
to use 100% instead.
<div class="col-lg-12 col-md-12 col-sm-12" style="height:100%;overflow-y:auto;">
some content...
</div>
CSS:
html,body
{
height:100%;
overflow:hidden;
}
How could I get this to work with height:100%;
Thanks!
You can add pre-scrollable class for the div you want to scroll.
If you search the .css there is a max-height but you cant edit. So you have sure it will maximize the page in the window for that max value.
Hope it helps, i used the same for a one-page with scrollable divs.
I am stuck and hope someone has an easy solution I've not thought about :-)
I have a 1040px centered div for page content, menu and footer.
The header image shall have the same left margin as the content div AND grow to the right side (for those with higher screen resolutions)
Is there any way to do this using CSS? I know, I could calculate the left margin of the content box with javascript and set the header-margin dynamically, but I would prefer a css solution.
Regards,
Martin
Why not just place the header outside of the sitecontainer?
And then giving it a width of 100%, and a min-width of 1040px.
(Or stretch the background image, depending on if it's 1 color, or an image.)
Is that what you meant? Maybe post the HTML and the CSS, by the way.
Alright, so what you mean is that the header does stretch across, but that the content inside the header (a menu, a logo, whatever) doesn't get centered like the sitecontainer.
If that's the case, here's what to do;
<div id="header">
<div id="headercontent">
<img src="logo.png">
<nav>
<ul>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
</ul>
</nav>
</div>
</div>
And for the style something like;
#footer{
width: 100%;
min-width: 1040px;
color: [your header color];
}
#headercontent{
[in here you simply put the same styling as the sitecontainer]
}
Is that what you meant? I hope it helped.
I have the following structure:
<div id="wrap">
<div id="container">
<div id="header">
</div> <!--close header-->
<div id="main">
… etc
I'm trying to display a background image that will show the full height of the image, but not force the page to scroll as a result of it but that will scroll with the page content.
I've placed a #bgimage div after the opening tag of the #container div and I've tried the following CSS:
position:fixed + height:100% - displays the full height of the image but doesn't scroll with the page content
position:absolute + height:100% - scrolls with the page but cuts off the image where the page content ends
position: absolute + height:1000px - displays the full image but forces the page to scroll
Any idea?
Thanks
Set the background on the body itself. CSS3 allows you to set multiple backgrounds in case you already got one. Although this doesn't work in IE8 and before.
[edit]
Since that doesn't work in your page, try to make the bgimage div a container for your page content without specifying an exact height. Set the min-height to 100%.
That way, it should size to the page content. It will always reach to the bottom of the window, and it won't force scrollbars when they're not needed. The min-height causes the div to fill the window in case the content is smaller than the window height.
Use background-attachment: fixed; it will scroll with the page.
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...