I am trying to position divs nested within a centred wrapper so that they don't move when I adjust the size of a browser. The idea is similar to the Facebook homepage where all the divs stay centred and don't move relative to each other when the page is made bigger.
All of my divs are nested in this:
#header {
width: 750px;
margin: 0 auto;
}
What do I have to do to position the divs within? Is it something to do with positioning?
Sorry this is a bit of a vague explanation, please do ask for clarification!
Any help would be much appreciated, thanks.
You should probably have a clearfix class for that container div (See http://www.positioniseverything.net/easyclearing.html)
As for the inner DIVs, float: left; and an explicitly defined width is all you need to have them appear side by side.
As a rule of thumb: Don't use position: absolute. It is rarely the best way to achieve a layout effect.
If you do use absolute positioning, then set position: relative on the container so that it establishing a new positioning context and elements are positioned relative to its edges instead of the window.
#header {
width: 750px;
margin: 0 auto;
position: relative;
}
I used to have the same problem,
I fixed it by using the attr :
style='min-width:970px;'
i hope it helps
Related
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
I am trying to put an absolute div inside a relatively positioned div. But I don't want to define a height for the relative div.
The relative div has a background colour and when I don't define a height the absolute div goes 'outside' the relative div. I can't control how many lines the text will be so the height of the divs change
HTML
<div class="row top-footer">
<div class="top-footer-text text-center">
<div class="test">
<h1>title</h1>
<div class="footer-btn-wrap">
<div class="footer-btn">button</div>
<div class="footer-btn">button</div>
</div>
</div>
</div>
</div><!-- /top-footer -->
CSS
.top-footer {
position: relative;
background-color: #686a6f;
width: 100%;
padding-top: 40px; margin: 0;
}
.test {
position: absolute;
top: 0px; margin: 0;
}
EDIT
I want .top-footer (position: relative) to contain .test (position: absolute) with space/padding/margin on the top and bottom of .test. the height of the div is unknown because the content may take up more than one line depending on screen size
Adding whitespace around the child div is fairly trivial. However preventing the parent div from collapsing is more tricky and is the thing you need to tackle first. The problem you are having is that with the parent relatively positioned and the child absolutely positioned, the only element on the entire page that actually "knows" where the child is is the parent... and even then it's a fairly bad parent because it won't even make enough space for the child! The rest of the DOM will behave as if the element isn't even there - other non-positioned elements will float over or above it - even text will be obscured by your child div. Assuming you want to put other content in the parent div using absolute positioning in this way only means you're going to have to use absolute positioning all around the place... which can get a bit heavy on the brain debugging layout problems later on.
The only possible solutions I can think of offhand are:
Use javaascript to sniff out the height of the child div and apply that to the parent. A fairly simple job if you use a library like jQuery but that requires extra downloaded files and makes your site unnecessarily bulky if this is the only task you're using it for. THis also wouldn't solve the problem of the child div obscuring other elements on the page.
Rework your CSS (and it might take a lot of reworking depending on how far you've got and the complexity of the styling) to use display:inline-block on the child... this will stop the parent from collapsing but might give you additional layout issues.
Rework your CSS (ditto) to float:left the child div. You would then need to use a CSS "clear hack" in order to prevent the parent divv from collapsing, although this is a tiny piece of CSS you can cut and paste from elsewhere... an easy job.
If you're determined to use absolute positioning like this my preferred solution would be to use jQuery (option 1) because most of my work tends to use a degree of it anyway... it's a tool I would have handy and the code to perform this task would be quite trivial.
EDIT - Here's a little fiddle to get you started. https://jsfiddle.net/fo8mq1vf/
This is how the output of your code looks like: https://jsfiddle.net/s3zLa54t/2/. The parent div (.top-footer) does contain the .test div. What browser are you using to view the output?
As for the padding, I guess you don't see any effect of changing padding-top. Try removing the top: 0px property in the .test div.
If this is not what you were looking for, do clarify the question here.
The answer to your question is simply remove
position:absolute from your absolute div (.test)
position:relative from your relative div (.top-footer)
height:300px from your relative div (.top-footer)
This is the tested version of https://jsfiddle.net/s3zLa54t/3/ with multiple number of divs under your main div. You can check that it is not going beyond the grey background.
.top-footer {
position: absolute;
background-color: #686a6f;
width: 100%;
padding:0px;
margin: 0;
}
.test h1{
padding-left:20px;
position: relative;
top: 5px; margin: 0;
float:left;
color:#FFF;
}
.footer-btn,.footer-btn-wrap
{
padding-left:200px;
color:#FFF;
}
.footer-btn a{
padding:5px 10px;
float:left;
color:#ffffff;
text-transform:capitalize;
text-decoration:none;
}
I have always used margin to move a floating div to the correct position in a parent div (say the logo div within a header div). This has always worked but that meant you have to play with the individual height of the elements else it will affect the remainder of the layout downwards.
I found another method today and that is to make the logo div position: relative; and then use example top: 20px; to move the element around, and this does not appear to affect the layout.
I don't want to adapt to this without knowing that there may be other implications, so can anyone point out common flaws in either of the above methods or possibly suggest a better solution?
// Sample HTML
<div id='header'>
<div id='logo'>
LOGO GOES HERE
</div>
</div>
// Sample CSS
#header {
height: 100px;
}
// Version 1
#logo {
float: left;
margin-top: 20px;
}
// Version 2
#logo {
float: left;
position: relative;
top: 20px;
}
From Mozilla developer:
relative
Lay out all elements as though the element were not
positioned, and then adjust the element's position, without changing
layout (and thus leaving a gap for the element where it would have
been had it not been positioned). The effect of position:relative on
table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
I hope this answers your question.
Sometimes it might be the right thing to use, other times not. It really depends on your layout, if you want to make a responsive design, it might be better to have the margin there.
In your case you have a fixed height on the header, so you can use relative. I think it is a more common practice to use margin. I am only aware on issues concerning position: fixed on mobile devices.
You can learn more about CSS and positioning here.
In postion absolute and fix when u use top or bottom or right or left,you must not use float, you must for its parent use this style
postion:relative;
best regards
So what I'm trying to accomplish is to have a div centered on the page (margin: auto auto;) with a navigation div just to the left of it.
The idea being the navigation div can be switched on or off (so may or may not be there). If its there or not should not interferer with the centering of the main div.
Below is an example
I've tried a few things
Wrapping both divs with a main div. Setting the main div to margin: auto auto and then setting both child divs to float: left. The problem is that when the nav div dissapears the entire thing shifts left.
Keeping the middle div margin: auto auto; floating the nav div left and then using margin-left but this changes when the page gets bigger or smaller.
Any pointers would be appreciated in the best way to do this. I was hoping to avoid tables.
JSFiddle link
Try this:
In your html:
<body>
<div class="encasing">
<div class="leftmenu"></div>
</div>
</body>
In your css:
html, body
{
width: 100%;
height: 100%;
}
div.encasing
{
top: 50px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 500px;
background-color: green;
position: relative;
}
div.leftmenu
{
right: 100%;
width: 10%;
height: 300px;
background-color: red;
position: absolute;
}
The important parts are:
To put your block containing the menu inside your center block
Make the center block have margin-left: auto; margin-right: auto;
Make the center block have a relative positioning
Have the menu have a absolute positioning
Make the menu have right: 100%
The idea here is to make the left menu use the position of the center block and then adjust itself. Right: 100% will put the right edge of the menu on the left edge of the menu.
In the end, a really good trick in css is that absolute positioned elements adjust themselves relative the the nearest relative or absolute positioned parent. :)
A few solutions I can think of:
Use absolute positioning for the navigation div. You probably want to give the body element a min-width to avoid the navigation div overlapping the main div when the window is too small.
Three-column layout, e.g. two divs with fixed widths floated to the left and right, and the content div between them. Inside the left-floated div, display your navigation div (or not). Alternatively, try display: inline-block on the three columns. The difference is in how small windows are handled (try it out). Again, you can counter undesired effects by setting a min-width on the body.
Completely fixed layout. Decide on an ideal screen resolution, and hard-code everything to that. This way, you can absolute-position everything where you want it, but the downside is that it won't look good on anything that deviates too much from the intended resolution. Especially mobile devices will see devastating results; you counter these with #media queries to adjust your layout to other screen resolutions.
You should also try to find a site that does what you want to do, and see how they did it (inspect HTML, CSS, and maybe Javascript).
I have been editing a WordPress website for the first time and now I have had a problem where the main content div overflows the footer and i'm not sure how to deal with this.
Here is the website:
www.twazzle.co.uk/twazzle/wordpress/
Any help would be appreciated.
Your #content and #primary elements both have absolute position, so their dimensions won't affect the layout of anything else on the page, when they grow/contract the other elements don't grow/contract to fit. Start by changing these both to position: relative or static, this will cause some other things to break due to the way the css has been written, but you'll have to take that as a starting point to fix it.
You've got a few problems here. One, you have floated elements inside blocks with no float or clears. Two (and this is your main problem) your #content div is position:absolute but nothing else is. With absolute positioning your divs will ignore others resulting in overlapping and other messiness. To fix, before making an element position:absolute make it's containing block element position:relative. You'll also want to fix that float problem.
#main {
overflow: hidden; //this tells it to contain floated elements inside it
}
#primary {
float: left;
margin: 10px;
position: relative; //this will contain nested absolutely positioned elements
width: 999px;
}