I need to show a page with a product icon (which is usually 300x400px in dimensions) on the left side of the page and its details on right side.
I thought I'd put the description in rows of a table.I created 3 div elements- a containerdiv,an icondiv,and a detailsdiv and tried to float the icondiv to left and detailsdiv to right.I got the icondiv on left side of page,but the detailsdiv is shown below the icondiv not side by side!
Ideally the icondiv should be 25-30% in width of containerdiv and detailsdiv should take up the rest of the width.I am wondering if there is a way to do it without mentioning width in pixels.
please correct me if there is something wrong with my css
thanks
mark
<div class ="itemdetailscontainer">
<div class="itemicondiv">
<img border="0" src="${item.isbn }.png" alt="${item.isbn }.png" />
</div>
<div class="itemdetailsdiv">
<table id="itemdetailstable" width="100%">
<tr>
<td>
${item.name }
</td>
</tr>
<tr>
<td>by</td>
</tr>
<tr>
<td>${item.maker.name }</td>
</tr>
<tr>
<td>
<p>Description:</p>
<p>${item.description}</p>
</td>
</tr>
</table>
</div>
</div>
css is
div.itemdetailscontainer{
float:clear;
}
div.itemicondiv{
float:left;
}
div.itemdetailsdiv{
float:right;
}
I tried this
div.itemdetailscontainer{
width:100%;
}
div.itemicondiv{
float:left;
width:25%;
}
div.itemdetailsdiv{
float:right;
width:75%;
}
and this gets the effect..
thanks everyone for responding..Is the use of
width : 25% etc problematic? Do I need to hardcode width in pixels etc?
The overflow property was new for me..
See: http://jsfiddle.net/Uys4s/
div.itemdetailscontainer{
overflow: hidden;
background: #eee
}
div.itemicondiv{
float: left;
width: 30%;
background: #ccc
}
div.itemdetailsdiv{
overflow: hidden;
background: #aaa
}
width: 30% handles this: "Ideally the icondiv should be 25-30% in width of containerdiv"
overflow: hidden on div.itemdetailsdiv handles this: "detailsdiv should take up the rest of the width".
overflow: hidden on div.itemdetailscontainer will contain the floats in the way I think you imagine the nonexistent clear: float will. Take a look at the valid values of clear. If you desperately wanted to use clear: both to clear your floats, this is how you'd do it: http://jsfiddle.net/Uys4s/1/ - but overflow: hidden is easier.
Be sure that your container (itemdetailscontainer) has enough width to hold them side by side. Inspect with Firebug or other tool and check the width.
Also I would suggest you use div's for the itemdetailstable for consistency.
There's nothing called float:clear It should be :
float : none;
or if you're trying to clear the float it should be :
clear:both
float: clear does not exist!
I think you want this: clear: left/right/both
Related
I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.
Here's a stripped down version of my HTML:
<table>
<tr>
<td class="a" rowspan="2"><div>A</div></td>
<td class="b"><div>B</div></td>
</tr>
<tr>
<td class="c"><div>C</div></td>
</tr>
</table>
And CSS:
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;
}
And a JSFiddle. And here's what I'm getting and what I'm trying to get:
What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.
(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)
Option 1
Simply add overflow:auto; to your div CSS
Demo Fiddle
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}
Option 2
Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.
Option 3
The only other way would be to set position:relative on the td elements then position:absolute for the child div
Hello I am trying to make an online chat application.
I have the html:
<body>
<table align="center" width="80%">
<tbody class="scroll">
<!--All of the chat-->
</tbody>
<tbody class="formheight" style="width:100%">
<tr>
<td>
<form style="width:100%" action="Write-to.php" method="post">
<input autocomplete="off" name="txt" type="text" id="usermsg" style="font-size:2.4vw;" value="" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
And the css:
html, body
{
height: 100%;
max-height:100%;
overflow: hidden;
}
table
{
height: 100%;
}
tbody {
overflow: auto;
width:100%;
}
thead > tr, tbody{
display:block;
}
I want the 2nd tbody (The one that contains the form) to lie at the bottom of the page and the first to fill the rest of the page upwards.
Currently I am having to use jquery to (kind of) do what I want. Currently the form is half hidden. I would rather do this all with CSS so that it works better with mobile devices.
How could I do that?
Jquery:
var heighty = $(window).height();
var height = $('.formheight').height();
$(".scroll").css("height", heighty - height + "px");
I also can't for the life of me get the form text input to be 100% width?
Please see JSfiddle
I am also very open to another way of laying out this chat app all together!
This is possible in CSS, but would be very difficult to get working across all browsers. Instead, here is my recommendation:
Create an element that fills up 100% height with a bottom padding set to X px.
Create an element with position:fixed and a height of X px.
Give the latter element a z-index:2 and the former a z-index:1. z-index doesn't need to be assigned manually, elements further down in source code automatically have a higher priority and are displayed over previous elements (if they overlay visually).
If you want, you could use a different unit. Percents are very easy because you can have them add up to 100%, so no need for a margin. Of course each has its respective drawbacks, but in my experience what I've described generally has good compatibility and displays comparably on all devices. You could even use CSS #media queries to change the height, X, for different devices.
You need to use something what we call a "Sticky Footer", In your case, your second body goes in the sticky footer. Have a look at this http://ryanfait.com/sticky-footer/ or this http://www.cssstickyfooter.com/ for the css+html for a sticky footer
So there's this image in my code and with following code it is centered correctly horizontally,
img#headerImage{
width: 600px;
margin-left:auto !important;
margin-right:auto !important;
}
but when I add margin-left:-300px; the image is resized appropriately but it is slightly offset to the left and no longer exactly centered.
Any ideas?
Also, here's some of the HTML:
<tr>
<td class="headerContent" id="logoContainer">
<img src="url" style="max-width:600px;"
id="headerImage" mc:label="header_image" mc:edit="header_image"
mc:allowdesigner="" mc:allowtext="" />
</td>
</tr>
You could better still use margin:0px auto;
add display: block to your img css
When you say margin-left:-300px you are saying you want the picture moved 300px to the left. With a right margin set to auto it will of course be offset left. If you want to make it center and then move it over just slightly then I recommend reading up on this answer here: Offset div from center
Also you will want to add
display:block;
I have a table in my html that I would like to center on my page. I have the following code. I is perfectly find in ie but not in chrome. Am I doing something wrong?
<table align="center">
<tr>
<td>
<div class="zoom_controls"> </div>
</td>
</tr>
</table>
The align="center" syntax was deprecated a long time ago. Add margin:0 auto to your table:
table {
margin:0 auto;
}
jsFiddle example (border added for visibility)
Give the table a fixed width, if possible.
Give the table a top- and bottom-margin of 0 (or other if you want to) and a left- and right-margin of auto.
This works with every kind of element with a known width.
You can also use a variable width (em / %).
EDIT: seems like other were typing the same solution as me.
For me what worked is:
margin: auto;
display: inline-block;
Tables
Not sure if this is possible, but I have a div with a "border" background. Inside this div is another div that holds the content, and I want this div to appear under the border.
Is this possible to do with CSS?
Edit: Sorry for writing it in a hurry, let me try to explain more.
The parent div uses background-image like so:
background-image: url(images/SomeImage.png)
SomeImage.png is just a custom border that appears at the top of the div.
I have a child div inside this parent div, and I want it to appear beneath SomeImage.png. Is this possible?
Do something like this:
HTML
<div id="border-bg">
<div id="content">
Your content goes here
</div>
</div>
CSS
#border-bg {
background:url(images/border.png) no-repeat;
z-index:100;
position:relative;
}
#border {
z-index:10;
position:relative;
}
Make sure to add the width and height of border image.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Check this for more info about z-index
it is possiple. try changing the opacity of the parent div.
for example
$("#childdiv").css({ opacity: 1.0 });
$("#parentdiv").css({ opacity: 0.75 });
I think you want to apply inner shadow http://sublimeorange.com/css/css3-inner-shadow/ on the content div?
<div id="border-frame" style="padding: 10px; background-color: red">
<div id="content" style="padding: 10px; box-shadow:inset 0 0 10px #000000; background-color:white">
this is some great text
</div>
</div>
http://jsfiddle.net/gzbVG/
I ended up putting the "background image" in another div and using negative margins. Sorry for the confusion but none of the other solutions worked for me.
Just throwing this out there...
I'm using this to put a background image behind a login screen...
<table align=center width=100% border=0 cellpadding=0 cellspacing=0 background="images/image.png" STYLE="background-repeat: no-repeat; background-position:center">
<tr>
<td align=center valign=middle height="350" background="images/loginimage.png" STYLE="background-repeat: no-repeat; background-position:center">
Content Here
</td>
</tr>
</table>