I am trying to achieve an effect in HTML + CSS like this
_____________________[ Some Div ]
The ____ is a border-bottom. The Div to the right of it shouldn't have the border. I want this border to stretch as much as possible, so that together they occupy the width of the parent. I am trying to avoid any fixed spacing layout.
I tried using a table with width:100%:
<table style="width:100%"><tbody><tr>
<td id="borderDiv"></td>
<td id="contentDiv">Some Div</td>
</tr><?tbody></table>
The extra space goes to the second td instead of the first one. I also tried floating the content div to the right:
<div>
<div id="contentDiv" style="float:right">Some Div</div>
<div id="borderDiv"></div>
</div>
But the div with the border now fills up the entire space of the parent. Couldn't figure out a way to constraint it to the leftover space.
Maybe I'm misunderstanding your question and I know the HTML + CSS purists are going to hate me for this but can't you do the following:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td><nobr>my content</nobr></td>
</tr>
</table>
If the second column has a specific width that you want you can specify that and remove the <nobr> tags and end up with something like:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td style="width: 200px">my content</td>
</tr>
</table>
The purist alternative to Brian's solution, using CSS properties:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td style="white-space:nowrap">my content</td>
</tr>
</table>
<div>
<div id="contentDiv" style="float:right; width:30%">Some Div</div>
<div id="borderDiv" style="margin-right: 30%"></div>
</div>
Floats are required to have a width so that's how I'd approach it.
This might work, but need more info about how you are dealing with the height. If it's fixed for example just make the float a bit taller.
<div>
<div id="contentDiv" style="float:right;background:white;white-space:nowrap></div>
<div id="borderDiv" style="border-bottom:1px solid black;"></div>
</div>
Related
I want 4 gray blocks next to the fire truck image, but no matter how I place them in a table, they show up lower as if there is 200px of padding above them. I can't figure out why they keep moving.I want them top aligned, and adding a vertical align didn't help.
<table width="1000" border="0" height="322">
<tbody>
<tr>
<td><img src="/Images/Monroe_Fire_Department_Website_Banner_03.jpg"></td>
<td class="work"><img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg"></td>
</tr>
</tbody>
</table>
Feel free to take a look at the example/source code with the link below.
http://monroefiredepartment.businesscatalyst.com/test.html
The offending CSS looks like vertical-align: baseline being applied to all elements on the page. If you inspect the <td> element that contains the four grey blocks, and uncheck vertical-align: baseline, then the blocks shift upwards and align with the top of the fire truck image.
I think that you can safely remove this from the stylesheet, as it doesn't appear to affect any other elements on the page.
try this
<table width="1000" border="0" height="322">
<tbody>
<tr>
<td><img src="/Images/Monroe_Fire_Department_Website_Banner_03.jpg"></td>
<td valign="top" style="
float: left;
"><img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg">
<img src="/Images/Banner-Nav-Background-Gray_03.jpg"></td>
</tr>
</tbody>
</table>
I have divs as shown in the FIDDLE , the div content gets overlapped with the header resulting in hiding of the content data ie "Sample data 1".
<div id="header">
<div id="firstdiv">
<table border="0px" width="100%" style="background-color:rgb(2, 44, 72)">
<tr>
<td id="test1" style="width:90%;" align="left">test
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<table border="0">
<tr>
<td>Sample data 1
</td>
</tr>
<tr>
<td>Sample data 2
</td>
</tr>
<tr>
<td>Sample data 3
</td>
</tr>
<tr>
<td>Sample data 4
</td>
</tr>
</table>
</div>
//CSS
#header
{
position:relative;
}
#firstdiv
{
float:left;width:100%;
position:absolute;
color:white;
}
Thanks
Remove the absolute positioning from the #firstdiv element. The left float also seems unnecessary.
See here: http://jsfiddle.net/k8Vut/2/
Add some padding to header: http://jsfiddle.net/k8Vut/3/
#header
{
padding-top: 25px;
}
Since your firstdiv is absolute it'll start from top: 0 position and hence overwrites the relative positioned header. So if you add some padding, it'll move the header a little below and make space for firstdiv
I've been working on this site a lot lately, because I really want to get it done, but sadly I just keep getting problem after problem. So this time, I set up the div perfect, but when you are on a lower resolution, the div decides to move down. I don't understand it. If I zoom in it happens. Or if I zoom out on a low resolution, it's perfect.
The CSS:
#states{
float:left;
background-color:#EEEEEE;
overflow: auto;
display:inline-block;
font-size:14;
}
#container{
position:relative;
margin-bottom:40%;
margin-left:11%;
}
#index{
float:left;
}
The HTML:
<table width="100%" align="center" border="1" cellspacing="1" cellpadding="5">
<tr>
<td width="100%" valign="top">
<?php states(); ?>
<div id="container">
<!--Start Content-->
<div id="index">
<table align="center" width="100%" class="test" border="0" cellspacing="1" cellpadding="15">
<tr align="left">
<th>Posted</th>
<th>Title</th>
<th>Description</th>
<th>Location</th>
<th>User</th>
</tr>
</table>
</div>
<!--End Content-->
</div>
</td>
</tr>
</table>
Maybe you should try a tableless approach.
is a DIV inside a TD a bad idea?
If you use a div in a td you will however get in a situation where it might be hard to predict how the elements will be sized.
#main {
margin: auto;
padding: 0;
width: 95%;
}
#left-wrapper {
display: block;
}
#content {
height: 500px;
white-space: nowrap;
overflow-y: auto;
overflow-x: scroll;
}
<div id="main">
<table>
<tr>
<td>
<div id='left-wrapper'>
</div>
</td>
<td>
<div id='content'>
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
The content wrapper contains a table which holds some data which size is unknown, and must not be wrapped so white-space:nowrap is set, and it works fine. The height of the content div has a fixed size and the vertical scrollbar appears ok. The main div's width is set to 95%. The problem is that the content div does not activates the scrollbar when the data is too long to fit, instead it resizes itself to the right side of the screen, even if the wrapper main div's width is set to 95%. Is there a way to activate the content div's horizontal scrollbar without setting it's width? It's maximum width should be in line with the width of the main wrapper, it would not be a problem even if it has a fixed width, but then it must fill the remaining area to be in line with it's wrapper main div which as I mentioned has it's width set to 95%.
I searched everywhere, days are passing and I simply can't figure out a right solution. Please if anyone has a suggestion I would appreciate it very much. Thanks.
The inner <div> will stay inside the container <div> with the CSS you have. But, because you have a <table> surrounding the inner <div> it doesn't behave as expected.
I think the solution may be to layout the page without the <table>.
This example shows the inner <div> being constrained inside the outer <div> using your current CSS.
<html>
<head>
<style>
#main {border:solid 2px orange; margin: auto; padding: 0; width: 190px;}
#left-wrapper {display: block;}
#content {border:solid 2px purple; height: 500px; white-space: nowrap; overflow-y: auto; overflow-x: scroll;}
</style>
</head>
<body>
<div id="main">
<div id='content'>
<table style="border:solid 1px #ddd;">
<tr style="background-color:#ccccff;">
<td>column A</td>
<td>column B</td>
<td>column C</td>
<td>column D</td>
<td>column E</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>2</td><td>3</td>
</tr>
<tr>
<td>11</td><td>12</td><td>11</td><td>12</td><td>13</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I've written some javascript that first loads an image into div1a, div2a, div3a and div4a.
Then it sequentially loads the "b" divs and fades out the "a" divs.
What I want is for the "b" divs to fade in over top of the "a" divs before the "a" divs fade out.
The javascript is working fine except for the fact that the "b" divs load below instead of on top of the "a" divs.
Keep in mind that this table is inside a centered "wrapper" div. So, using absolute positioning doesn't seem to work.
<table height="258" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="244">
<div id="div1a" style="position:relative; z-index:100;">HERE</div>
<div id="div1b" style="position: relative; top: 0; left: 0; z-index:101">THERE</div>
</td>
<td width="244">
<div id="div2a" style="position:relative;"></div>
<div id="div2b" style="position:relative;"></div>
</td>
<td width="244">
<div id="div3a" style="position:relative;"></div>
<div id="div3b" style="position:relative;"></div>
</td>
<td width="244">
<div id="div4a" style="position:relative;"></div>
<div id="div4b" style="position:relative;"></div>
</td>
</tr>
</table>
Any help would be greatly appreciated.
Hmm, maybe using position: relative on the parent and position: absolute would work:
<table height="258" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="244" style="position:relative;">
<div id="div1a" style="position:absolute; z-index:100;">HERE</div>
<div id="div1b" style="position:absolute; top: 0; left: 0; z-index:101">THERE</div>
</td>
<td width="244" style="position:relative;">
<div id="div2a" style="position:absolute;"></div>
<div id="div2b" style="position:absolute;"></div>
</td>
<td width="244" style="position:relative;">
<div id="div3a" style="position:absolute;"></div>
<div id="div3b" style="position:absolute;"></div>
</td>
<td width="244" style="position:relative;">
<div id="div4a" style="position:absolute;"></div>
<div id="div4b" style="position:absolute;"></div>
</td>
</tr>
</table>
Make your containers ( here) position:relative. Make both of the s in side "position: absolute; top: 0; left: 0;". No z-index should be necessary.
I know this isn't a direct answer to your question, but I would highly recommend looking at http://jquery.malsup.com/cycle/ to accomplish what you're doing. It sounds like you could very easily get the interaction you're looking for.
Either way, best wishes!