I have a 5 html pages with the same code. Say this is the code:
<div id='generic'>
</div>
all the 5 pages link to the same external CSS file which is just this:
<style>
#generic {
width: 700px;
height: 500px;
}
</style>
On each of the 5 pages, I inserted a table, like so
<div id='bottomBar'>
<table id='bottomTable'>
<tr id='bottomTr'>
</tr>
</table>
</div>
The table has only one row. In the one row, I need to pick a random number from 1-10, and that is how many td's the row is going to have. So the first html page can have 2 td's, the second can have 6td's, etc. I need to make it so that the vertical position of the table is the same throughout all pages but the table must be horizontally aligned. I have to use position absolute since other users might type a few paragraphs before the table on some pages, and on some pages, there might not be any additional paragraphs so in order for me to have the same vertical position of the table, I need position absolute. How do I make it so that every table is horizontally centered? By horizontally aligned, I mean that every table has an even amount of white space on the left And the right regardless of how many td's the table has.
margin: 0 auto;
doesn't work for me. Note that I am not using CSS3 and am using IE8.
margin: 0 auto wont work for absolute positioned elements. What you need to do is absolute position it in the middle. You accomplish this by moving it left 50%; and then adjusted the left margin to negative half of the elements width
#bottomTable {
position: absolute;
width: 700px;
left: 50%;
margin-left: -350px; /*Half the width of your element*/
}
this will center it in the middle of its parent
ps. make sure the parent containers position is set to relative
http://jsfiddle.net/s7Gmm/3/
Related
I have a container that is a certain width.
I have two select elements rendering on the same line in this main div container. The first one is absolute positioned 40px left from the main div container and the right one is absolute positioned 40px right from the main div container. Thus, resulting in a centered container within the main div container.
My goal is to push two select elements into the resulting container that sit on either side of either, having the same width, and having a space equidistant in the middle.
Here is my current HTML:
<div id="container">
<select class="edit" style="left: 40px; top: 290px; width: 136px;"></select>
<select class="edit" style="left: 190px; right:40px; top: 290px; width: 136px"></select>
</div>
So in this one we are assuming that the left has a combined pixel count of 40+136=176px, width plus left positioning and the right having a pixel count of 190+136+40=366, left positioning plus width plus right;
the result would be a container having two equidistant select boxes within the constraints of 40px each way.
I'm not sure if my math is correct but any assistance with this would be greatly appreciated.
Try removing the left:190px from the right hand element. The right:40px is enough to position the element to the right.
I'm not sure if this is exactly what you're looking for, so let me know if I've misunderstood something, but what about this solution (note that .edit could just as easily have a strictly %-based width, I just wanted to show how flexible this solution could be):
https://jsfiddle.net/Lcn51a1p/
HTML:
<div class="container">
<select class="edit"></select>
<select class="edit pull-right"></select>
</div>
CSS:
.container {
margin: 0 40px;
}
.edit {
width: 120px;
max-width: 50%;
}
.pull-right {
float:right;
}
Looking for a solution where I can change the height of a div based on the total height of three divs (One of which is variable based on content).
The Green Div will change height based on content. The yellow divs don't. I would like the height of the blue div to change based on the total height of the three left divs. I'm trying to get the top and bottom of all the divs to match up.
Jquery is a good option for my site, I'm just not sure how I would set this up.
Thanks for any help.
Play resizing the textarea:
http://jsfiddle.net/coma/dxpB2/
div.box {
position: relative;
padding: 0 110px 0 0;
}
div.fixed {
height: 50px;
background-color: #FFF601;
}
div.variable {
margin: 10px 0;
background-color: #00FF0D;
}
div.lateral {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100px;
background-color: #9699FF;
}
Firstly to add jquery you can just add this line to your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Or you can download the actual file and reference it correctly.
Now you are saying the green div will adjust based on content. After you set the content inside the div you should be setting the blue divs height.
$("#blue").height($("#yellow1").height() + $("#green").height() + $("#yellow2").height());
I can think of two and a half pure CSS solutions.
First solution requires to wrap all four div's in a container element with position: relative set to it.
Then the blue div can be positioned absolutely and forced to inherit the containers/wrappers height (which comes from the total height of the yellow and green div's) like so:
position: absolute;
top: 0;
right: 0;
bottom: 0;
The width of the blue div can be set explicitly, or with left, depending on how responsive the layout needs to be. And the horizontal space taken up by the blue div can be compensated on the wrapper with padding-right.
But no-one really wants extra DOM elements to achieve proper layout, do they.
Another option would be to set position: relative on the green div and place the blue div as a child of the green div in the DOM. Then position the blue div so:
position: absolute;
left: 100%;
top: -x; /* Whatever is the height of the top yellow div and margin between*/
bottom: x; /* Whatever is the height of the bottom yellow div and margin between */
width: x; /* Set explicitly for example */
This is possible due to the fact that yellow div's are of fixed height.
And extending it further, the entire blue div can be accomplished by the ::after pseudo element on the green div (same CSS applies as for the second solution), but it's suitability depends on what the contents of the blue div need to be.
I created a JS fiddle for the problem: http://jsfiddle.net/GgPJq/
Every time you click on the Green Text it doubles.
This gets you to where you need to be
jQuery(".blue").css("height", jQuery("#left").outerHeight());
Basically every time green expands the line above changes the style to match.
I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.
Is there a way to accomplish this without javascript?
http://jsfiddle.net/5JU2t/
The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.
Just remember to position the parent (.main) div relatively and remove all of the floats:
.right {
bottom:0;
position: absolute;
right:0;
top: 0;
}
.main {
position: relative;
}
Working example: http://jsfiddle.net/5JU2t/1/
Note
The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:
Working example: http://jsfiddle.net/5JU2t/2/
I'd try wrapping it in a third div and give your two divs either height:auto or height: 100%.
Set the parent (.main) to display as table
and set the children (.right, .left) to display as table cell.
I would say funk all the extra css and use a table layout
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.
I've looked this up and the outlook seems bleak. I'm not interested in using a table. I have 6 or so 'a element' inline-blocks that make up a menu. It's slick, except all the 'a elements' are set to width: auto; to accommodate their text. Without an explicit width, I'm not able to center align them. I have a container div and a child div that wraps around my 'a elements'.
Any thoughts?
Thanks
Mike
You could set the style of the a element to margin: 0 auto, but that doesn't work in IE6. In IE6, you should set the wrapper div to text-align: center, and (optionally) set the text-alignment for the a element back to text-align: left
<div style="width: auto; margin-left: auto; margin-right: auto">
div content
</div>
will align center on the page
the div element will take all the width space of the container element if it isn't set a width value.
So if you want to center a div you must set a width...
A solution to your problem (if I have understand it) can be:
<div style="text-align:center;"><span>[... yours content ...]</span></div>
where your div has became a span and a new div puts the span in the center.
Hope this can help you!
Bye,
Alberto
My advice is this answer - however someone commented that it wouldn't work in IE6. Here's how to make this work:
<div id="container">
<div id="centeredBlock">centered</div>
</div>
#container {
text-align: center;
}
#centeredBlock {
margin: 0 auto;
text-align: left;
width: 50%;
}
You need to set margin: 0 auto; on the outer container div, add text-align: center; on the inner div; and use an unordered list to build your menu in the first place.
Without setting an explicit width, the <div> tag will automatically expand to 100% of the width of its parent. Therefore, setting margin: 0 auto; will make it center -- with 0px on both the left and right.
here a nice workaround for centering a div with no width:
http://www.kensfi.com/how-to-align-center-a-div-with-no-width-declared/
Here is also a good example for the situation: http://www.cssplay.co.uk/menus/centered.html
If you need it centered and dynamically shrinking/expanding to accommodate the content without knowing the width, then your only option really is using a table. It is the only elastic element in HTML repertoire.
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td>
Whatever...
</td>
</tr>
</table>
P.S. You can have a div to shrink dynamically as well by setting the float property to float:left or float:right. So it will stick to the left or the right, but you can't have it centered this way.