after reading similar questions on stackoverflow, nothing seemed to solve this problem. Here it is..
I have an DIV at the top of my page that I use as a menu. Dimensions are 1920px by 50px. And the CSS code for it is:
#top_bar{height:50px; width:1920px; margin:0px auto;
background:url("img/top_bar.png"); left:0px; top:0px; position:relative;}
I then have a content #wrapper DIV under that which is 960px wide and is centered. The CSS code for it is:
#wrapper{width:960px; margin:0px auto; overflow:hidden; left:0px; top:0px;
position:relative;}
When I zoom in on the page, the content #wrapper DIV stays in the correct position (centered), but the #top_bar DIV moves to the right.
The HTML code of the page is:
<body>
<div id="top_bar">
(...menu links, etc)
</div>
<div id="wrapper">
(...page content)
</div>
</body>
I'm in the process of fixing this for a client so any solutions would be greatly appreciated. Thank you in advance :)
It does not shift, it looks like it does only because the width of 1920px extends well past the margins of your screen. The other div is much smaller.
If you want both divs to appear equally aligned you must give them the same widths
To achieve centered positioning you have to do it with dynamic divs.
DEMO HERE
HTML:
<div class="side-pannel" id="left-pannel"></div>
<div id="container">
<div class="two-item-column">
<div class="item1 column-border-middle">1</div>
<div class="item2 column-border-middle">2</div>
</div>
</div>
<div class="side-pannel" id="right-pannel"></div>
CSS:
#container {
position: relative;
width: 88%;
height: 580px;
float: left;
}
.side-pannel {
position: relative;
width: 6%;
height: 580px;
float: left;
}
.two-item-column {
position: relative;
width: 100%;
float: left;
}
.column-border-middle {
border-right: 1px solid black;
}
.item1 {
height: 288px;
background: #ccc;
}
.item2 {
height: 291px;
background: #ccc;
border-top: 1px solid black;
}
If you zoom in on an element whose size is fixed, it's going to get bigger, obviously. Unless it gets wider than the viewport in which case it has no choice but to expand to the right.
Related
I need a container with a fixed width, and an element inside it that can scroll within that fixed width. The catch is that I need the content that goes beyond the bounds of the fixed width container to be visible. Does anyone know how to achieve this?
Codepen of the situation I'm describing: https://codepen.io/anon/pen/zyZOjM
.outer {
background: red;
width: 400px;
height: 800px;
}
.inner {
background: blue;
max-width: 200px;
margin: auto;
overflow-x: scroll;
height: 300px;
color: white;
}
.element {
background: green;
width: 800px;
height: 100px;
}
<div class="outer">
<div class="inner">
<div class="element">Initially, this element should overflow all the way off the edge of the red (exactly how it does when overflow is set to visible). It should be scrollable, though (how it is when overflow is set to scroll) and when you scroll all the way to the right,
the right of the green should end at the same place is does now (right edge of the blue).</div>
</div>
</div>
I'm pretty stumped. This could have a simple solution but I've been pulling my hair out a bit.
Is this what want to achieve?
.container1 {
background: red;
width:400px;
height:800px;
}
.doop1 {
background:blue;
max-width: 200px;
margin:auto;
overflow: auto;
height:300px;
overflow-Y: hiddden;
}
.doop2 {
background:green;
width:800px;
height:100px;
}
#overflow-text{
display: block;
width: 190px;
position:fixed;
}
<div class="container1">
<div class="doop1">
<div class="doop2">
<p id="overflow-text">
Initially, this element should overflow all the way to the edge of the red. When you scroll all the way to the right, the green should end at the same place is does now (edge of the blue).
</p>
</div>
</div>
</div>
I have a three-column css layout with a header on top. On the left there will be the navigation, on the right a small column, with some advertisement maybe or so and in the middle there will be the content.
I would like DIVs left, right and middle go to the bottom of the page (so i guess i need height:100%) and i want the header have a fixed height of 60px.
I tried several solutions, which i found on the internet but if give everyone a height of 100% (so that the background of "right" and "left" to the bottom of the page) I always have to scroll a bit. I m pretty sure, that is because of the header having a absolute height value. Even though i put everything in a container which has the height of 100%.
My html looks like that:
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="left">
<ul id = "nav">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
<div id="right"><p>Advertisement 1 </p><p>Advertisment 2</p></div>
<div id="middle">
some content
</div>
</div>
and the corresponding CSS to it is:
html,body{
height:100%;
margin:0;
padding:0;
line-height: 1.5em;
}
#container{
position:relative;
width: 850px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
height:100%;
}
#header{
width: 850px;
background: #EAEAEA;
height: 90px; /*Height of top section*/
text-align: center;
}
#left {
width: 200px;
float:left;
background: #CCFFFF;
height:100%
}
#middle{
width: 490px;
margin-left:200px;
padding-left:10px;
height:100%;
}
#right {
width: 150px;
float: right;
background: #e0eeee;
height:100%;
}
#left ul {
padding: 0;
list-style: none;
width: 200px;
}
Thank u in advance.
Change position: relative; to position: absolute; within your #container id. At this point you may have your left, middle, and right behind the header. If so you will add top: 90px; making sure that the value after top matches the height of your header div.
I'm stuck trying to make the footer stick to the bottom of the page.
This is the basic layout:
<div id="div-header"></div>
<div id="div-body">
<h2>Some content</h2>
<div id="div-left">Left content</div>
<div id="div-right">
right content
</div>
</div>
<div id="div-footer-bottom"></div>
And this is how I style the footer:
#div-footer, #div-footer-bottom{
background-color: red;
border-top: 1px solid #CCCCCC;
height: 40px;
padding: 20px 30px;
text-align: right;
}
#div-footer-bottom{
position: relative;
clear: both;
}
As you can see below, the page is rendered OK when the browser is zoomed at 100%:
But if the browser is zoomed at 120%, for example, this is how the page is displayed:
Please take a look at the full code in jsfiddle to discover what I am doing wrong, since I don't know what else to try:
http://jsfiddle.net/RS88D/
Thanks in advance.
Try adding the following css
#div-footer-bottom{
position: fixed;
bottom:0;
left:0;
clear: both;
width:100%;
}
For overlapping
Add margin-bottom to the div-left. Margin should be equal to the height of the footer (add padding pixels also). In your case
#div-left
{
margin-bottom: 80px;
}
Update 24-Mar-2014
For your first fiddle details just add the below and try,
body, html
{
height:100%;
}
And in the #div-body css, remove min-height: 490px; and add min-height: calc(100% - 190px);
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
I would like to get your advices about the design of a header of my webpage.
The general structure of its design is shown below:
Its HTML part:
<div class="header">
<div class="logo1"></div>
<div class="logo2"></div>
</div>
Its CSS part:
.header{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 160px;
border: 1px solid #48ace1;
}
.logo1{
float: left;
width: 655px;
height: 160px;
background: url(images/logo1.png) no-repeat 0px 2px;
}
.logo2{
float: right;
width: 465px;
height: 160px;
background: url(images/logo2.png) no-repeat 0px 2px;
position: relative; /* it is set to relative because inside this layer I have
several elements with absolute position.*/
}
The problem:
When I open this webpage in a computer with a wide screen it opens perfectly, without any problems, but when I open it with a computer with a small-width screen the second logo (.logo2) falls down to the next line as shown in the following figure:
This happens because totaly the width of .logo1 and .logo2 is 655px+465px=1120px. So, once the width of the browser is less then 1200px more or less, the second logo (.logo2) couldn't find place inside the .header and it automatically falls down to the next line.
In such a cases, I want .logo2 to overlap .logo1 if the width of the browser is less then the total width of two logos (.logo1 and .logo2, in my case more or less 1200px). How can I achieve this affect? Note, that I need .logo1 to be justified to the left-hand and .logo2 to be justified to the right-hand.
Thank you.
Why use float? You're halfway to using CSS positioning with that position:absolute;! http://jsfiddle.net/6sFY5/1/
You can use absolute positioning:
http://jsfiddle.net/LuRDk/
.header{
position:relative;
height:84px;
padding:20px;
border:1px solid green;
}
.logo{
position:absolute;
width:80px;
height: 80px;
border:1px solid red;
}
.right{right:20px;}
.left{left:20px;}
<div class="header">
<div class="logo left"></div>
<div class="logo right"></div>
</div>
Try this,
<div class="header">
<div class="logo1"></div>
<div class="logo2"></div>
<div style="clear:both"></div>
</div>
Add a negative margin to logo1, like so:
.logo1
{
float: left;
width: 655px;
margin-right: -655px;
height: 160px;
background: url(images/logo1.png) no-repeat 0px 2px;
}
This will mean the window can get as narrow as possible, and logo2 will never drop down.
Edited, since first try would still make logo 2 drop at width less than 655px.
Edit 2: You can also set a z-index on .logo2 so that it will cover logo1, if that is what you want.