I m trying to align a div which is at the bottom of all the divs.
last div is floating div and align by css to top.
I don't know how to align it from the left hand side without any problem of the screen resolution change. If possible please tell me if I can give one div's id whose position is always fixed and left distance from that div with the help of css.
<div id='fixeddiv'>this div is at the top</div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div id='bottom_div'>this div is floating</div>
Thanks
Well, if I understand you correctly and you want to give one left-alignment to the top and bottom divs and another to the rest of the divs, use classes:
<div id='fixeddiv' class='header-and-footer'>this div is at the top</div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div id='bottom_div' class='header-and-footer'>this div is floating</div>
css:
.header-and-footer {
margin-left: 50px;
}
.other-content {
margin-left: 10px;
}
or:
div {
margin-left: 10px;
}
div.header-and-footer {
margin-left: 50px;
}
user jquery offset
http://api.jquery.com/offset/
and then
var offsetval=$('#relativediv').offset()
$('#bottom_div').css('left',offsetval.left);// change left value the way you want
Related
I'm losing my mind trying to get this simple thing working - I have a div that's 80px high - inside of which I have other divs that should take up the height of the 80px div, and just fill in the space, essentially splitting the parent div up into sections. Right now the inner divs are getting pushed all over the place and I don't know why.
The boxes should all be hugging each other above the black horizontal line.
JSFiddle: http://jsfiddle.net/Mk7L4/
HTML:
<div class="post-panel">
<div class="upvote-area">
<p>20</p>
</div>
<div class="title-area"> <a class="post-title" href="#post.Url"><strong>#post.Title</strong></a>
</div>
<div class="response-count-area"> <span>0 replies</span>
<p>Active: Now</p>
</div>
<div class="view-count-area"> <span>0 views</span>
</div>
</div>
In the css, I have the height of the container element set to 80px, and each of the inner divs set to display: inline-block, and height: 100%.
What am I doing wrong?
Add vertical-align: top;
.post-panel div {
height: 100%;
display: inline-block;
vertical-align: top;
}
;)
I do not find a way to center content vertically in Twitter Bootstrap Grid system. http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
For example
<div class="row">
<div class="span4" style="height:50px;min-height: 50px;">My centered object vertically</div>
</div>
The object in span4 div will always be at the top of div. I have tried to put vertical-align: middle; on parent and child Div's but that do not help.
Use line-height or padding for it...
Like this for line-height,
.line-height { line-height:30px; }
<div class="row">
<div class="span4 line-height">My centered object vertically</div>
</div>
Like this for padding, for 50px height minus it with the padding means paddingtop+height+paddingbottom = 50px,
.padding { height:30px; padding:10px 0; }
<div class="row">
<div class="span4 padding">My centered object vertically</div>
</div>
I am trying to arrange a group of divs on-top of each other. The top div must be static place in the top-left (width = 100%) and not affected by the vertical scrolling that the centre div will have. I works somewhat as I want, except that the container div also got a vertical scroll that I don't want. Now I have two overlapping vertical scrollbars, one for the container div and one for the centre. I also use JQuery mobile on the page if that could help me arrange the divs.
How can I make my centre div (id=scroll) the only div that is scrollable and have my top div (id=fixed) at a fixed position without a scrollbar (no overlap of vertical scrollbars) and not be affected by page scrolling?
<div id="conatainer" style="overflow: hidden; height: 100%">
<div id="fixed" style="position: static; top: 0%; overflow: hidden; height: 50%">
<div id="map_canvas" style="width:100%; height: 85% ;min-height: 180px">
...
</div>
<div id="scroll" style="position: absolute; overflow: auto; overflow-x: hidden; height: 50%">
...
</div>
</div>
This is a standard jQuery Mobile template with a fixed header and content that scrolls: http://jsfiddle.net/Gajotres/yWTG2/
<div data-role="page" id="index">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
And here's a working example: http://jsfiddle.net/Gajotres/Rf7NA/
For a header to be fixed it needs data-position="fixed" attribute.
Also in case you WANT to use only a layout and not jQuery Mobile styling take a look at this ARTICLE or find it HERE: Search for the chapter: Methods of markup enhancement prevention.
Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
I have a two column layout, using a container and a div called "left" and a div called "Right". How do I make sure that the div#right is only 500px, but div#left is as big as the user's browser will allow ...?
Here's what I have now:
<div id="container">
<div id="left" style="float:left"> </div>
<div id="right" style="float: right; width: 500px"> </div>
</div>
Don't float the left div to the left. If you leave it "unfloated", then it will be the main content and automatically fill the available space.
You can do it by unfloating the #left div and giving it a padding-left that equals the #right div's width (this makes room for the right div). Finally, you'd need to swap the source order of both div's.
<div id="container">
<div id="right" style="float: right; width: 100px; "> </div>
<div id="left" style="padding-right: 100px; "> </div>
</div>
You can see it in action here.
Change style of you left div to:
<div id="left" style="margin-right:500px"></div>
This will make sure that content won't flow under the right floating div when content in the left one takes more vertical space than content in the right one.
Important
Don't forget to put the floated div in front of the unfloated one. So put your right one first in the markup and then the left one.
Solution to your particular problem
So you have two div elements
<div id="endants-content">
<div id="screenshot-preview">...</div>
<div id="endants-main-content">...</div>
</div>
And CSS should be like this to make it work as expected:
div#endants-content
{
/* put min-width here is you need it */
}
div#screenshot-preview
{
float:right;
width:30%;
}
div#endants-main-content
{
margin-right:30%;
overflow:auto;
}