I have a table in a div element. The div is used as a placeholder only (it has "fixed" position and hard defined sizes/left/top). The table has 100% width and height (of the div).
When I use internal "caption" tag within the table it seems like it's not included in the total height of the table. The table is out of the div from the bottom.
Without caption everything is OK (the table has the same position/size as the div):
--------<div>--------
| =<table>========= |
| | ||
| | ||
| | ||
| |================||
---------------------
With caption it's broken (the table is outside the div):
--------<div>--------
| |
| Caption (large) |
| |
| =<table>========= |
| | ||
| |
| |
|================|
What I want is to make table have the div height minus caption's height.
Try fixing the captions width and height and setting margin and padding to 0. Then add up the table height + caption height to make the div height.
Add overflow: hidden; to the outer <div> - as long as your div doesn't have a pre-defined height, it will cause all internal elements to be included in any background-color/image size computing for the <div>.
Related
I want to overlapping, relatively positioned divs, and for a parent div to wrap them, such that it fits both (as if they weren't overlapping). So something like this:
+------------------------+
|+----------+ |
|| Child 1 | |
|| +---------------+|
|| | ||
|+------| Child 2 ||
| | ||
| +---------------+|
+------------------------+
So, the parent should always fit child 1 and child 2. Child 1 and Child 2 are themselves not a set width or height, their size is a function of their contents. Technically, the image above does more than I care about, since I plan for both divs to be at 0,0. I can't absolutely position them, because then they won't grow the parent.
I have a table with 1 row, and 3 columns. It's look like:
______________________
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
----------------------
The table has 940px width and 600px height. The first td and the last td should be the "container" sides. The web designer draw a concave - ) ( - PNG images for the sides. I must insert it with <img src""/>, because if I put the image for background, the image doesn't stretches. The problem is with the height of the image. Because every page is dynamic, I can't define the table height, or the image height. Every page should have auto height, but the problem is with the sides. If I insert the image with height='100%', the page goes long to the bottom of the page, because it has 2000px height. I tried with height:inherit, but no result. How could I declare the image?
You can use a background image and add background-size: contain or background-size: auto 100%.
I am trying to create a page that has a width that adjusts to the screen with a fixed width column on the right. So for example:
| | |
|-------Content------|--Column--|
| | |
| | |
|---Content---|--Column--|
| | |
| | |
|-----Content----|--Column--|
| | |
http://www.reddit.com/ would be a good example of this.
Thanks
This blog is pretty useful for grabbing complex layouts.
ultimate-2-column-right-menu-pixels
this is essentially what reddit does: http://jsfiddle.net/pxfunc/rCG84/
the side div 1.) is above content in the html, 2.) is set to float:right;, and 3.) given a specific width (width:300px)
<div id="side"></div>
<div id="content"></div>
the content div will adjust with the window size
This is a tricky question, but I will do my best to ask it:
I have a middle column of content and I want to add columns to the left and right of it, but I want them to "hug" the middle column. How can I center the middle column always and have the other two columns "hug" it?
The columns have a fixed width of 750px and basically when the viewport is maximized it should be something like this on a big monitor:
-------------------------------------
| | | | | |
| | | | | |
| | left | mid | right | |
| | | | | |
| | | | | |
-------------------------------------
and when the window is not wide enough, the left and right columns should get cut-off, but the middle column should still be centered and visible (assuming they don't make it too small horizontally):
-------------
| | | |
| | | |
le|ft | mid | ri|ght
| | | |
| | | |
-------------
Where "le" and "ght" are off-screen and not visible in the viewport.
I'm interested in any ways of accomplishing this. Currently I'm using
margin-left: auto;
margin-right: auto;
to center the middle column, but if there are ways to accomplish this without that, by all means =)
Thanks for reading this tricky question. I hope I got my idea across.
(If you can think of a better question title, feel free to edit it. I wasn't sure what to put)
P.S. Each column is actually made up of a few divs itself, (blocks that make up a column), I'm not sure if that makes the problem any easier to solve, or if that totally changes the problem...
Something like this ? http://jsfiddle.net/ndtLX/
i'm using an absolute positioned div above 2 floated divs, each large 50% of the container.
the problem is that on the left and right columns, the off-screen happen on the other side, and not on the same side as you asked...
You could also try floats to see if that gives you what you want
.divLeftCol
{
float: left;
}
.divRightCol
{
float: right;
}
<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>
I have a list that looks like this
--------------------
| | |
| 1 | 2 |
| | |
| 3 | 4 |
| | |
| 5 | 6 |
| | |
--------------------
(it's a simple <ul> with <li>'s)
the container of this list, let's call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.
How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can't add any classes to these list items :(
I tried with margin-right: 10px on the <li>'s and margin-right: -10px on the <ul> but that doesn't work :)
An example with margin-right.
edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/
Not terribly elegant, but simple enough.