The width of the float div when applied % work fine in ie 8,9,10 but not in 7.
here is the jsfiddle http://jsfiddle.net/NHuH8/6
the comment and close need to be # either ends.what need to be done
thanks
You can use an absolute position for the comment and close divs
CSS:
#child1{
background-color:blue;
width:300px;
border: 1px solid yellow;
margin-bottom:15px;
}
#child3{
background-color:yellow;
width:auto;
position:relative;
}
#comment{
position:absolute;
bottom:0px;
left:0px;
}
#close{
position:absolute;
bottom:0px;
right:0px;
}
Fiddle
Give the "parent" CSS declaration a width in pixels.
Get rid of your widths and set the 'close' to float: right;. And put 'close' before 'comment', or 'close' will end up on the next line.
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;
}
I have been at this for a while and I am wondering how to make a side menu stay in the same place, but stay floating on the right side. When ever I use the fixed element it all ways pulls my sidebar from right to left.
Thanks.
Set sidebar position to fixed. Set the height and width you wish and the set the right css property to 0. That should work
Make sure to Specify position like top and left like:
div#myDIV
{
position:fixed;
width:100px;
height:100px;
left:10px;
top:100px;
}
See this example: http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed
try right:0
.cont
{
position:fixed;
width:200px;
height:200px;
right:0px;
top:100px;
background:#999;
}
http://jsfiddle.net/6L6wj/
I would also consider to use the z-index property:
#yourdiv {
position:fixed;
width:200px;
height:200px;
right:10px;
top:10px;
z-index: 10;
}
Remember to set the other contaner to
#maincontainer {
position:relative;
z-index: 1;
}
I have more than 100 divs on the page and each row has 3 divs. I want to remove left margin from first div and right margin from right div whereas center div should have 15px margin from left and right. Please guide me how can I do that without giving specific classes (no margin) on each div. Here is the example
here is my css code
.prp_box{
margin:15px 15px;
width:100px;
height:100px;
background:#5f03a6;
}
Check this out : http://jsfiddle.net/VHXEp/
Use nth-child(n) CSS3 selector.
You could try using the nth-child css selector.
#container:nth-child(3n+0)
{
margin-left: 0;
}
#container:nth-child(3n+3)
{
margin-right: 0;
}
This code might need a few adjustments, the 3n is how often, so every 3. The number after the + is where to start
Check the JsFiddle
http://jsfiddle.net/kpTdE/
.prp_box{
width:100px;
height:100px;
background:#5f03a6;
float:left;
}
.sec_box
{
width:100px;
height:100px;
background:#5f03a6;
float:left;
margin-left:30px;
}
.sec3_box
{
width:100px;
height:100px;
background:#5f03a6;
margin-left:260px;
}
I'm among the coutless people who are facing the same problem about adapting parent's height to the contained elements. I did some research and found similar questions, but no answer could help me, so i thought i should open a new one.
I already tried the suggestions given as answers here, and here, like adding "clearfix" as a class for the container div (in this case, the clearfix class is there in the Fiddle i created), adding a workaround-spacer, and so on. I don't have any floated element, thought, so maybe it's a different kind of problem.
The problem still remains, in both the nested divs i have in my code (#content_wrapper doesn't adapt to #div_1 and/or div_2, while #div_2 doesn't increase its height to the contained <ul>.
I really hope to find a solution (maybe it's just something wrong in my code i can't de-bug).
Thanks for your attention.
Generally speaking, you want to avoid using absolute positioning for layout purposes.
What you're looking for is equal height columns. The whole point of equal height columns is that you don't need to know the height of any of the columns involved, they'll all be the same height and expand gracefully no matter what their contents are. The simplest way to achieve this is by using the table* display properties.
http://jsfiddle.net/UfWJh/3/
body {
font-size:10px;
}
/* wrappers */
#header_wrapper {
width:95%;
height:40px;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
#content_wrapper {
display: table;
width:95%;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
/* div1 */
#div_1 {
display: table-cell;
width:70%;
border:1px solid purple;
}
/* div 2 */
#div_2 {
display: table-cell;
width:25%;
border:1px solid purple;
}
#div_2 ul {
list-style-type:none;
}
#div_2 li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
If you want a parent element to adapt to it's children you cannot explicitly define the value of the axes (width or height) that you want to adapt. Use width:auto or height:auto then use min-width,min-height,max-width & max-height to set minimum and maximum values for the adapting axis.
You then set values for the children, which can either be explicit values or again min and max thresholds.
From your rather messy code, it was easy to see, you have done much of it right, but you must not understand the position options. Try to gain a better understanding of relative,absolute & fixed positioning.
I've fixed it by changing the absolute positioning to relative and fixing a missing css selector for the styles you were trying to use on the <li>'s:
/* div1 */
#div_1 {
position:relative;
width:70%;
top:5px;
left:5px;
border:1px solid purple;
}
/* div 2 */
#div_2 {
position:relative;
width:25%;
top:5px;
right:5px;
border:1px solid purple;
}
#div_2 ul {
position:relative;
top:0px;
left:0px;
list-style-type:none;
}
#div_2 ul li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
I suspect you probably don't need all those fixes you tried. Also, I find code so much more readable in this format.
Here's is my answer:
Remove position absolute (it's not a good idea to implement your layout like this...not cross-browser friendly...)
Make its content display: table
and then display: table-cell on the 2 divs to have even height...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/4/
If you do not want it this way or care about equal height then use overflow:hidden on the content wrapper and float: left the 2 divs...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/7/
I want to implement 3 DIVs inside a container, just like table rows
top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}
Now the question is what is the best approach to have the middle div's height dynamic and keep the structure correct.
Here's what I've done so far: http://jsfiddle.net/pvPSD/4/
HTML
<div id="notification">
<div id="n-top">
top
</div>
<div id="n-middle">
middle<br /><br /><br /><br /><br />middle
</div>
<div id="n-bottom">
bottom
</div>
</div>
CSS
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:absolute;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:absolute;
left:0px;
top:14px;
width:175px;
background: red;
}
#n-bottom {
position:absolute;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
This here worked for me
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:relative;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:relative;
left:0px;
width:175px;
background: red;
}
#n-bottom {
position:relative;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
Remember that absolute postitionning removes the element from then normal flow of the page. The way you had it had all the elements placed in absolute postionning. Therefore, they didn't hold their position within the page. Hence, the following elements were bascially looking to be placed at the top. Having the position relative, the location of the element is preserved on the page, and the next one is looking to be place after.
Hope this makes sense.
Just put top and bottom margin to your middle section, add a wrapper with position:relative and top section and bottom section inside the wrapper, with position:absolute and with height equals your margin.
If the top and bottom <div>s are a static height, then you can set the middle <div> to position 0,0 with height 100% and a margin at the top to match the height of the top <div> and a margin at the bottom to match the height of the bottom <div>.
Well it seems to me (I may have understood what you want wrong.) that getting rid of the positioning elements (absolute, top, left, bottom)for the inner div's from your css keeps it looking correct regardless of how big the middle div is. Is there some other reason why you need absolute positioning on those inner elements?