I made a button inside the div body and i want to show it on the right side of my div but when i zoom the page it get outside from the div body need help?
<style>
.mydiv
{
max-width:65%;
min-height:30px;
margin-left:20%;
margin-right:16%;
}
.a
{
max-width:100px;
height:20px;
position:relative;
margin-left:220px;
}
</style>
<html>
<div class="mydiv">
<button class="a">example</button>
</div>
</html>
I think this is happening because (for your div)
max-width:65%;
in the css...if you zoom in enough the button (which has max-width of 100px) is now exceeding the width of your div. Try setting your div to a number of pixels larger than 100px. If you want the button on the right side of the div, try setting the width to a number such as 300px.
max-width:300px;
then try zooming in. Also note IE6 and earlier do not support max-width.
You don't show us much context, but it may work positioning the button to the right using position:absolute;right:0;. (Note you'll need position:relative; on the container to keep it inside the container element)
.mydiv {
position: relative;
max-width: 65%;
min-height: 30px;
margin-left: 20%;
margin-right: 16%;
background: tan;
}
.a {
position: absolute;
right: 0;
max-width: 100px;
height: 20px;
}
Related
In the following fiddle:
http://jsfiddle.net/6qF7Q/1/
I have a yellow content area that has a min-height set to 100% - it's the background div to all pages and should take up at least 100% of the available height. If there's overflow, it expands vertically.
Then, within that yellow container, I have another child div (red) that I would like to take up as much vertical space as its parent. It seems I can't set height because the parent element only has min-height, and setting min-height on the red element doesn't work either.
So right now, the yellow is behaving as I'd like, but the red is not expanding. How can this be achieved with CSS only?
CSS:
.browser {
background-color: blue;
height: 600px;
width: 200px;
position: relative;
}
.innercontent {
min-height: 100%;
background-color: red;
width: 100%;
color: white;
padding: 2px;
}
.content {
background-color: yellow;
width: 100%;
min-height: calc(100% - 30px);
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: orange;
height: 20px;
}
HTML:
<div class="browser">
<div class="content">
<div class="innercontent">
This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.
</div>
should not see any yellow
</div>
<div class="footer"></div>
</div>
Take a look at this
I added this
*{
box-sizing: border-box;
}
html, body {
/* Make the body to be as tall as browser window */
height: 100%;
}
and changed some attributes u can see at fiddle
If thats what you want you should read this article
http://css-tricks.com/a-couple-of-use-cases-for-calc/
I made that based in this use-cases
I think this might solve your issue?
I have changed the innercontent to position: absolute
http://jsfiddle.net/6qF7Q/7/
If you have text in the yellow section it will always show.
Also, you're going to have to do a bit of fiddling to get your footer positioned correctly since you are going to have an overflowing absolute element. I think a full body position: relative wrapper will solve it.
P.S I don't see why you would need a .content AND a .innercontent if you don't want the .content to show?
This works much better and doesn't give you footer grief: http://jsfiddle.net/6qF7Q/9/
Whenever I resize the browser, the 2nd div in .container positions below the first one.
<div class = "container">
<div class = "one"></div>
<div class = "two"></div>
</div>
The divs are really blank.
CSS
.container{
overflow: hidden;
width: 810px;
min-width: 810px;
}
.one,.two{
width: 300px;
height: 450px;
}
.one{float:left}
I just realized that, you are not floating the other element, this is causing it to shift down, you should use float: left; or right as it's a div so it will take up entire horizontal space, and hence it is pushed down.
Demo
.one, .two{
width: 300px;
height: 450px;
float:left; /* Float both elements */
background: #f00;
}
Alternative
You should use display: inline-block; and white-space: nowrap; to prevent the wrapping of the elements
Demo
This will gave you the same effect, the only thing is 4px white space, you can simply use
.two {
margin-left: -4px;
}
the above will fix the white space issue for you
Demo 2
Add this CSS. Demo.
.two {
margin-left: 300px;
}
PS: When works with float, you should clearfix.
Give your body a minimum width:
body {
min-width: 1110px;
}
Then, when the viewport gets smaller than 1110px the scrollbar will appear.
Note: if you add margin, padding or border to the divs, add it to the min-width of the body (or take some extra space).
I'm trying to accomplish this design:
Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?
I tried making the sidebar be "fixed" with a fixed width of 200px, and then the main content just has a margin-left of 200px. However, if the user's browser is then smaller than the main content, the sidebar overlaps all the content as the user tries to scroll horizontally.
Is there a smarter way to achieve this? Thanks!
Use the content div as your container for the page.
.sidebar {
position: fixed;
width: 200px;
height: 400px;
background: #000;
}
.content {
margin-left: 200px;
height: 500px;
width: auto;
position: relative;
background: #f00;
overflow: auto;
z-index: 1;
}
.info {
width: 1440px;
height: 300px;
position: relative;
background: #f55;
}
<div class="sidebar"></div>
<div class="content">
<div class="info"></div>
</div>
Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.
Have a fiddle: http://jsfiddle.net/djwave28/JZ52u/
edit: responsive sidebar
To have a responsive fixed sidebar, simply add a media-query.
Example:
#media (min-width:600px) {
.sidebar {
width: 250px;
}
.content {
margin-left: 250px;
}
}
Here's another fiddle: http://jsfiddle.net/djwave28/JZ52u/363/
Here is an alternative: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/
body{
padding-left:200px;
margin:0;
}
div#sidebar{
position:fixed;
height:100%;
width:200px;
top:0;
left:0;
background:grey;
}
div#content{
background:black;
width:100%;
height:1600px;
}
Here is another alternative by using only two CSS lines
.sidebar {
position: sticky;
top: 0;
}
and the credit goes to this post.
You can also experiment with the code over here.
So I have three div's
One parent and two child.
The parent is as follows:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
the two child divs are as follows
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
The trick:
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.
How can I center an image horizontally and aligned to the bottom of the container at the same time?
I have been able to center the image horizontally by its self. I have also been able to align the bottom of the container by its self. But I have not been able to do both at the same time.
Here is what I have:
.image_block {
width: 175px;
height: 175px;
position: relative;
margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}
<div class="image_block">
<img src="..." border="0">
</div>
That code aligns the image to the bottom of the div. What do I need to add/change to make it also center the image horizontally inside the div? The image size is not known before hand but it will be 175x175 or less.
.image_block {
width: 175px;
height: 175px;
position: relative;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/* nothing specific */
}
explanation: an element positioned absolutely will be relative to the closest parent which has a non-static positioning. i'm assuming you're happy with how your .image_block displays, so we can leave the relative positioning there.
as such, the <a> element will be positioned relative to the .image_block, which will give us the bottom alignment. then, we text-align: center the <a> element, and give it a 100% width so that it is the size of .image_block.
the <img> within <a> will then center appropriately.
This also works (taken a hint from this question)
.image_block {
height: 175px;
width:175px;
position:relative;
}
.image_block a img{
margin:auto; /* Required */
position:absolute; /* Required */
bottom:0; /* Aligns at the bottom */
left:0;right:0; /* Aligns horizontal center */
max-height:100%; /* images bigger than 175 px */
max-width:100%; /* will be shrinked to size */
}
wouldn't
margin-left:auto;
margin-right:auto;
added to the .image_block a img do the trick?
Note that that won't work in IE6 (maybe 7 not sure)
there you will have to do on .image_block the container Div
text-align:center;
position:relative; could be a problem too.
This is tricky; the reason it's failing is that you can't position via margin or text-align while absolutely positioned.
If the image is alone in the div, then I recommend something like this:
.image_block {
width: 175px;
height: 175px;
line-height: 175px;
text-align: center;
vertical-align: bottom;
}
You may need to stick the vertical-align call on the image instead; not really sure without testing it. Using vertical-align and line-height is going to treat you a lot better, though, than trying to mess around with absolute positioning.
Remove the position: relative; line. I'm not sure why exactly but it fixes it for me.
have you tried:
.image_block{
text-align: center;
vertical-align: bottom;
}
#header2
{
display: table-cell;
vertical-align: bottom;
background-color:Red;
}
<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
<p>this is a test</p>
</div>
</div>