On http://www.posterlion.com/ the left side disappears when you make the window smaller by the browser. The horizontal scrollbar appears though but I can't get to it anymore by scrolling to the left. The content is centered through a absolute div. How do i prevent this from happening?
position:relative;left:50%;margin-left:-517px;
width:1015px; overflow:visible; background-color: #FFFFFF; padding: 10px;
The best practice to centered tour layout is using margin: 0px auto instead of absolute positioning.
In your case you should remove your absolute positioning, create some div which contain all your layout (<div id='wrapper'></div> can be standard in this case) and set its margin to auto.
By:
#wrapper {
margin: 0px auto;
width: yourWidth;
}
In your given CSS add
min-width: 1050px;
Here is Css to update :-
#lwe {
width: 1015px;
overflow: visible;
background-color: #FFFFFF;
padding: 10px;
margin: 0 auto;
}
Related
I want a div to go across the page width no matter the size of one's screen. The problem I'm having is that although the width is 100%, when I view the page it requires scrolling horizontally. I've looked up solutions and tried the suggestions regarding the body element, but I still have this issue. Here are my body and div elements:
body{
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
}
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
To be clear this is not homework, I'm doing this for a personal project.
Yes, it is 100% width, but the browser also adds 1em of padding to it, so it's now 100% + 1em. You didn't set the box-sizing property and it's content-box by default.
If you want your layout to behave more naturally, add this to your code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Check it here: https://jsfiddle.net/avyxhfcp/
BTW: there is no "float: center;"
You can hide the horizontal overflow using overflow-x. You could also use overflow:hidden, but the code below specifically targets horizontal scroll bar.
body {
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
overflow-x:hidden; /* hide the horizontal overflow */
}
The solution cosmonot provided is incorrect and will only cause you problems when your div's content stretches off-screen and you can no longer troubleshoot when there are overflow problems because you won't be able to see a scrollbar horizontally.
The real problem is that your div is using width: 100% to occupy the entire horizontal space available, it is then adding on the padding you specified as extra, this results in the overall width being over 100% which breaks out the body element giving overflow and thus making it horizontally scroll able.
The solution is not to alter your body's overflow property, the solution is to apply box-sizing: border-box; to your control panel div. This will make the width you specify include the padding and margin's you specify.
Example
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
In future try not to play around with the body, it's usually what you put into it that needs to be troubleshooted.
As you can see on this link ( http://riksblog.com/Marnik/index.html ), for some reason the width of the body and website is as it should, but there's a strange, empty space next to my website which makes it wider than it should.
I'm using bootstrap so I'm not really able to use these tricks like media-queries in css for the desktop version.
your looking for the overflow css property try this:
body {
overflow-x: hidden;
}
to completely remove the problem get rid of the right padding on this class:
section.first .section-content {
padding: 150px 15px //remove left/right padding
}
The problem is this css:
section.first .section-content {
position: relative;
width: 100%;
padding: 150px 15px;
text-align: center;
}
which causes the .section-content div to be as wide as its parent plus 30px.
Possible solutions are to add a box-sizing property to the style
box-sizing: border-box;
or change the width so that it doesn't exceed its parent
width: calc(100% - 30px);
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */