I have been trying to get this right for days but I just can't.
My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit more content than the other two and the other two need to have buttons at the bottom (that are positioned so that their bottom edge is where the left column's content ends).
Here is an image that shows what I mean: http://img217.imageshack.us/img217/6400/49593032.png
I have tried the huge-padding-bottom-and-equally-huge-but-negative-margin-bottom-hack which works great until I try to move the buttons down. At first I tried to use absolute positioning on the button and position:relative on the container but since the container needs overflow: hidden to work the button will be hidden and placed at the bottom of the container (which is about 32767 pixels down due to the huge padding).
I also tried using the above hack while adding a second row which I put the buttons in. Besides the fact that the semantics of that don't make much sense, this method made it so that the content of the left column doesn't go all the way down. Since the hack required overflow: hidden attempts to use negative margins to push the second row up didn't work out either.
So I'm stuck here. Faux columns wouldn't help me and javascript is not an option. What would you do?
Use A List Apart's Holy Grail and position the buttons absolutely.
Don't really like it in this case, but at least one solution would be to use a table. The text height in the first column would force the height for the other cells, and you could use relative positioning inside the cells (with a div) to have the buttons at the bottom.
[removed code --- not 100% sure about your exact requirements]
You can use absolute positioning for your divs and then absolute position the buttons in them. Try this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { height: 100%; margin: 0; }
.col {
width: 33%;
position: absolute;
top: 0;
bottom: 0;
border: 1px solid #000;
background: blue;
position: absolute;
}
.left { left: 0; }
.mid { left: 33.33%; }
.right { left: 66.66%; }
.button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
</div>
<div class="col mid">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
<div class="col right">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
</body>
</html>
Related
The only way I know to get a layer on top is to use position: absolute.
(top good, bottom bad)
Once you do that you pretty much lose the option to scale dynamically with the rest of the page.
Sure you can do some width: calc(62% - 60px); hacking and get it almost there, or you can write a script that calculates the size etc..
But is there really no way to have a layer on top and still have it scaling with the page?
Its possible with position:relative; Relatively positioned elements takes the width of parent & can be bring on top by using z-index. z-index is applicable only on positioned elements.
Sample Code:
.menuParent{
height:34px;border:1px solid black;
}
.menu{
width:100%;position:relative;border:1px solid red;top:34px;z-index:1;background: white;
}
<div style="width:120px;" class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list</div><br/><br/><br/><br/><br/>
<div style="width:240px;"class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list width bigger width</div>
parent{
position: relative;
}
child {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
I am not sure why I am having such an issue with this, but I cannot get a container to show 100% width and have it at the bottom of the parent element.
I am wanting the home-img-text-container2 and its description to be at the bottom of the image container and for it to be 100% width of the image.
Just like where the arrow is:
What I have done is changed the position of the containers to absolute:
#home-img-text-container1, #home-img-text-container2 {
position: absolute;
}
Then modified the width and placed it at bottom:0
#home-img-text-container2 {
bottom: 0;
width: 100%;
}
In addition the before:
#home-img-text-description2:before {
width: 100%;
}
The modifications I made are in the max 640px viewport media query.
What am I doing wrong to not get the container2 div to be placed at the bottom of the image and be 100% of the width of the image?
See the fiddle to see what I have done.
Fiddle
Try this, if you have the home-img-text-container2 element inside of a container, place it out the outside like so
...
</div> <!-- End of main container -->
<div class="home-img-text-container2"></div>
</body>
Then in your css:
.container{
min-height: calc(100vh - 80px);
}
The 80px is the height of whatever your home-img-text-container2 element is I just used 80px as an example. Make sure you have spaces either side of the "-" as well
calc(100vh-80px); will not work
I tried recreating your page and everything worked fine. here is the code:
<html>
<head>
</head>
<body>
<style>
#home-img-text-container1, #home-img-text-container2 {
position: absolute;
}
#home-img-text-container2 {
bottom: 0;
width: 100%;
}
</style>
<div id=home-img-text-description1>
<div id=home-img-text-container2>
Text inside the container2
</div>
</div>
</body>
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
This question already has answers here:
How to center a button within a div?
(16 answers)
Closed 3 years ago.
I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc..
I want it to be both vertically and horizontally be centered. Here is what I have written right now:
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
Here's your solution: JsFiddle
Basically, place your button into a div with centred text:
<div class="wrapper">
<button class="button">Button</button>
</div>
With the following styles:
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
There are many ways to skin a cat, and this is just one.
You can center a button without using text-align on the parent div by simple using margin:auto; display:block;
For example:
HTML
<div>
<button>Submit</button>
</div>
CSS
button {
margin:auto;
display:block;
}
SEE IT IN ACTION: CodePen
Edit by author: This is a really out of date answer! Flexbox or grid are much better.
I've really taken recently to display: table to give things a fixed size such as to enable margin: 0 auto to work. Has made my life a lot easier. You just need to get past the fact that 'table' display doesn't mean table html.
It's especially useful for responsive design where things just get hairy and crazy 50% left this and -50% that just become unmanageable.
style
{
display: table;
margin: 0 auto
}
JsFiddle
In addition if you've got two buttons and you want them the same width you don't even need to know the size of each to get them to be the same width - because the table will magically collapse them for you.
JsFiddle
(this also works if they're inline and you want to center two buttons side to side - try doing that with percentages!).
try this it is quite simple and give you cant make changes to your .css file this should work
<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
Here is the solution as asked
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>
There are multiple ways to fix the same. PFB two of them -
1st Way using position: fixed - position: fixed; positions relative to the viewport, which means it always stays in the same place even if the page is scrolled. Adding the left and top value to 50% will place it into the middle of the screen.
button {
position: fixed;
left: 50%;
top:50%;
}
2nd Way using margin: auto -margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually absolute centering only requires a declared height and these styles:
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
For me it worked using flexbox.
Add a css class around the parent div / element with :
.parent {
display: flex;
}
and for the button use:
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
Place it inside another div, use CSS to move the button to the middle:
<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button>
</div>
Here is an example: JsFiddle
Make all parent element with 100% width and 100% height and use display: table; and display:table-cell;, check the working sample.
Working Git Version
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<button type="button" style="text-align: center;" class="btn btn-info">
Discover More
</button>
</div>
</body>
</html>
I'm using the equal heights CSS trick as outlined on this page.
It was all working fine until today when I need to add a dialogue box inside one of the columns, which is absolutely positioned to take it out of the flow. The problem is that since the container has "overflow: hidden" on it, the dialogue is being cut off when it overflows.
Aside from bringing the dialogue outside of the container element, is there any possible way to get it to show via CSS?
Here's a small example demonstrating what I've mentioned.
<style>
.container { overflow: hidden; margin-top: 30px }
.col {
float: left;
padding-bottom: 2000px;
margin-bottom: -2000px;
border-right: 1px solid black;
width: 100px;
background-color: grey;
}
.col.third { border-right: none }
#div-a { position: relative }
#div-b {
position: absolute;
background-color: red;
width: 35px;
height: 350px;
bottom: 0;
right: 0;
margin: 5px;
border: 2px solid black;
}
</style>
<div class="container">
<div class="col first">
<p style="height: 100px">One</p>
</div>
<div class="col second">
<p style="height: 300px">Two</p>
<div id="div-a">
<!-- this gets cut off by the "overflow: hidden" on div.container -->
<div id="div-b">
Foo
</div>
</div>
</div>
<div class="col third">
<p style="height: 200px">Three</p>
</div>
</div>
You see that div#div-b is cut off at the top when it overflows in the div.container element.
Unfortunately what you want to do is impossible without bringing the dialogue outside of the container element.
Your best bet is to make the dialog element a sibling of the container and position it that way.
Unfortunately no... I don't think there's a way to circumvent overflow: hidden with absolute position. You may experiment with position: fixed, but you won't be positioning under quite the same conditions if you use it.
One option would be to place the content of your overflow:hidden container into a sub-container (a child div perhaps). Then, make the sub-container match the dimensions of the container and move the overflow:hidden from the container to the sub-container.
Then, you can make the dialog a child of the container (a sibling of the sub-container), and it will now exist in an element that does NOT have overflow:hidden.
I haven't tested this, and removing the overflow:hidden from the container may break your design. If that is the case, I would suggest doing as others have and moving the dialog box outside of the container entirely. This could even be done via Javascript if you don't have the option of putting the dialog box's code anywhere else. (Javascript could make the dialog box a child of BODY, or some other tag, when you need it displayed)