I have a #wrapper { margin: 0 auto } centered in the middle.
I want to align a div.version inside of that wrapper at the top right corner (of this wrapper). So the .version div should still be inside of the #wrapper.
Which position value do I have to use here?
You can make use of absolute and relative positioning for your divs like this:
#wrapper {
margin: 0 auto;
position:relative;
width:400px;
background:green;
clear:both;
overflow:auto;
height:100px;
}
.version {
position:absolute;
top:0;
right:0;
background:blue;
height:100px;
width:50px;
}
Check out the DEMO
So, to make an element appear inside another element, you should give parent a position set to relative while any child element a position of absolute :)
Check out the nice article written on the subject at css-tricks.com:
Absolute Positioning Inside Relative Positioning
Related
I have structure where in the text needs to flow within the div box in the body. but seems like i cant get it to work. Maybe i am doing something wrong with the position: tag?
Here is the fiddle: http://jsfiddle.net/Tf5Z8/
and this is what i was hoping to accomplish: http://oi58.tinypic.com/332njm9.jpg so that as text keeps getting added (less or more), it keeps the bottom intact and resizes the div accordingly. Right now i have the #bodyContainer set to height:300px;
#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; }
but i don't want to do this since there would be many pages with different text amount.
Thanks a million, Cheers.
Change the #bodyContainer height to auto. Like this: JSFiddle
All you have to do is add min-height. So replace height property with min-height. And you are done.
If you don't have any problems using absolute position try this method. Add relative position to #bodyContainer and absolute position to #sidebarLeft, then float:right sidebarRight. Check this fiddle
CSS changes
#bodyContainer {
width:1024px;
min-height:100px;
margin:auto;
background-color:#f4f3e7;
padding-top:20px;
position:relative;
overflow:hidden;
}
#sidebarLeft {
height:100%;
width:360px;
background-color:#FFF;
margin-left:30px;
margin-bottom:20px;
position:absolute;
top:20px;
left:0
}
#sidebarRight {
height:100%;
width:634px;
float:right;
}
so here's my problem. I have two divs, and i want to be able to see both of them when i scroll down the page. Both divs are in the same parent container. If i give the parent a position:fixed, the the bottom div get's cut off, because you have to scroll to see it's full height. So i tried this. I gave position:fixed to the top div, and position relative to the bottom one. The fixed one now scrools but the relative doesn't "follow it" or stay beneath it.
Any ideas?
If I understand you correctly, the answer is to position both divs absolutely within the fixed parent.
JSFiddle DEMO
HTML
<div class="parent">
<div class="topDiv"></div>
<div class="bottomDiv"></div>
</div
CSS
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: fixed;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
top:130px;
left:0
}
I have a div that is centered using margin: 0 auto; display: table;. The div is 960px wide.
There is another div inside this one. It is a search box and it is left-aligned in the top corner. But I would like this div to be left-aligned to the very left side of the browser window, meaning it would be visually outside or inside the main centered div depending on the browser window size. Is there a way to achieve this in CSS?
here a fiddle: http://jsfiddle.net/skunheal/5qT3p/
this would be the code:
#container{
margin: 0 auto;
display: table;
width:400px;
height:300px;
background:#111;
}
#searchbox{
position:absolute;
height:20px;
width:100px;
background:#f1f1f1;
left:0px;
top:0px;
}
hope this solves your problem
Just use position:absolute; left:0px; on the search box. See my jsfiddl (the container ID has shrunk so that it could fit in the JsFiddle window, but the concept should be sound): http://jsfiddle.net/CQ9cc/.
I want to center a fieldset in my page but I don't know how.
I used this css code :
fieldset
{
margin:auto;
display: inline-block;
text-align:center;
}
but it only center the content of the fieldset
I also used a <p style="text-align:center;"> <fieldset> ...</fieldset></p>
but it wont work.
so how can I center it ?
Edit :
The CSS code I'm using now :
fieldset
{
text-align:left;
display: inline-block;
vertical-align:middle;
}
div
{
text-align:center;
vertical-align:middle;
}
You will have to add text-align:center to the parent element (maybe wrap it in a div and play with it if it's by itself.) to actually center the element and not the content. See if that works.
Remove the display attribute. It needs to be a block element (which it is by default) for margin: auto to work. Or do you need it for something?
The solution is to position the element absolutely, offsetting the div by 50% from the left and the top part of the window and move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.
and this is the CSS code:
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
This worked for me
#fieldset{
border-color:blue;
border-radius:10px;
margin:-100px 0 0 -150px;
position:absolute;
left:50%;
top:50%;
}
But I do not the line margin:-100px 0 0 -150px;
I have a page news.html which is php included in my index.html - inside a #content div.
news.html has another div, which floats on the right and has a vertical line jpg to separate it from the main content, adds and stuff like that will be placed there.
Problem is I can't get it to 100% height(although it works for the line jpg) and I think the reason is some css issue. I also cannot place it below the footer for some reason, so that the 100% height line does not override it.
I use a main.css file for every page.
If I use position:fixed for the #poll div height 100% works, but then when zooming in/out of the browser my div moves which is not what I want. I know there is a min-width property but didn't seem to work for me.
Here is my code:
index.html:
//Content div is placed inside a #main table//
<div id="content"><?php include "news.html"?></div>
main.css:
html, body{
height:100%;
}
#main{
width:1010px;
height:100%;
z-index:2;
}
#content{
margin-top: 303px;
height:100%;
z-index:1;
}
#footer{
z-index:2;
}
#poll{
height:100%
background-color:rgba(255,0,0,0.6);
float:right;
z-index:1;
}
news.html
<div id="poll"><div style="background-image:url(images/vertical.jpg); width:5px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0; z-index:0;"></div>
<div>POLL CONTENT HERE</div>
</div>
If you use z-index then give to at least one position relative or absolute
Then it will work, like this:
{
z-index:2;
position:relative;
}
How to work Z-index Link here
z-index only works if you specify the position attribute for the element. So for each element for which you have given a z-index you need to specify the position to be either
position: relative;
or
position: absolute;