sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )
Related
On a portion of a web site I have a container which contains two blocks. One panel that has a static width and a left panel that should fill the space to the left of the right panel. I have solved it today by having the following markup:
<div class="container">
<div class="rightpanel"></div>
<div class="leftpanel"></div>
</div>
.leftpanel {
overflow:hidden;
}
.rightpanel{
width: 200px;
float: right;
}
The problem here is that I need to declare the rightpanel before the leftpanel. I would like to be able to declare it like this:
<div class="container">
<div class="leftpanel"></div>
<div class="rightpanel"></div>
</div>
Any suggestions on what I should do? Help gladly appreciated.
Simply change the element being floated, then set the width of the flexibly sized element to that of the page minus the known width of the sidebar, by using calc
Demo Fiddle
Change your CSS to:
.leftpanel {
float:left;
width:calc(100% - 200px)
}
.rightpanel {
width: 200px;
overflow:hidden;
}
I was wondering if someone could explain to me why this is happening. Sorry I am new to CSS/HTML. I am working on creating and HTML layout for a basic page, currently I have three Divs. I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.
So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening? I thought that since the space is already taken by my other two divs that I would not have to use the 'top' property in order for the third div to display. Why is it being hidden by the other divs?
Here is my HTML code:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
Here is my CSS code:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
Whenever you do use the float for the element then don't forget to clear them.
For easier I always use overflow:hidden; to the parent div:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
So now, you know the key reason of hiding?
Because the first two divs have set floats so they are taken out from the "normal" flow, while the last remains the same and isn't affected by the previous two.
To be affected you can either set float also to the last element, or clear the float.
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats for more info.
I always create a spacer div and use it whenever I need to clear any previous floats or coding. This is specially useful when I have a ton of divs within a parent div.
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
I have the following div structure below:
<div class="Large-Centered-Div">
<div class="Left-Div">
<div class="Inner-Left-Div">
</div>
<div class="Inner-Center-Div">
</div>
<div class="Inner-Right-Div">
</div>
</div>
<div class="Center-Div">
(Small Image/Etc. Would Go Here)
</div>
<div class="Right-Div">
<div class="Inner-Left-Div">
</div>
<div class="Inner-Center-Div">
</div>
<div class="Inner-Right-Div">
</div>
</div>
What I am looking to do is a bit complicated, but hopefully this all makes sense:
Have the "Large-Centered-Div" expand the entire width of the page and within the "Large-Centered-Div" have the "Left-Div", "Center-Div", and "Right-Div" set up so that the "Center-Div" is small and the "Left-Div" and "Right-Div" be large such that the "Center-Div" is small in width but in the middle.
Within both the "Left-Div" and "Right-Div" I would like the "Inner-Center-Div" to take up the majority of the space and only have the "Inner-Left-Div" and "Inner-Right-Div" take up enough space to show an image for their respective edges. In addition, I would like the "Inner-Center-Div" to be fluid with the width size.
With these things in mind, I have achieved the first goal on my list but not the second. Here is the code for the first item:
.Large-Centered-Div {
position:relative;
left:0px;
right:0px;
}
.Left-Div {
float:left;
vertical-align:middle;
width:47%;
}
.Center-Div {
float:left;
width:6%;
text-align:center;
}
.Right-Div {
float:left;
vertical-align:middle;
width:47%;
}
The question is, how do I achieve #2? Is this possible?
Thanks.
Try making the inner left and inner right div auto for the image and making the inter center div a certain percentage.
What I would do is hard code the width of the image. let's call it w pixels. So:
.Inner-Left-Div, .Inner-Right-Div { width: wpx; }
Then the inner center div will expand to fill the rest of the space.
What I would do is make the div's width a function of percent, that way, they will always be the same relative to each other, and they will resize perfectly.
.Large-Centered-Div{
width: 100%;
}
.Left-Div, .Right-Div, .Inner-Left-Div, .Inner-Right-Div{
width: 40%;
}
.Center-Div, .Inner-Center-Div{
width:20%;
}
This is by far the fastest and most DRY way of accomplishing this.
also, for convention's sake, it would be better to leave your class names lowercase. It's easier to remember your conventions if you simplify them, good luck!
-Brian
I have a column of text, with wide margins on either side. Below it, I have a full-width section of data (in tabular format).
I can align these against each other quite readily. My problem is that there is a 'tab' that sits on top of the table section. It's narrow enough that it doesn't interfere with the center column of text, and the layout calls for it to slide up into the white space to the left of the text.
The easy solution would a position:absolute, with top:foopx to slide it up relative to the rest of the div. The only problem is, the tab's height is dynamic. I need to somehow to top:'height'px, but (obviously) CSS doesn't contain anything for dynamic values.
What I need to do is align the bottom edge of the 'tab' against the top edge of the containing div, and I cannot for the life of me figure out any CSS statement that does that. I'd rather avoid a javascript based approach (e. g. at runtime get the height of the tab, then set top equal to that height) because the entire bottom div is refreshed from time to time using an AJAX call, and adjusting the height in that process causes the page to 'jitter' on the update (not sure why it doesn't happen without the height update; the jitter is in a separate section of the code).
Requested code example:
<html>
<head>
<style>
#smallColumn
{
float:left;
width:100px;
height:100px;
background:#000;
margin:5px;
}
#fullColumn
{
float:left;
width:200px;
height:300px;
background:#000;
margin:5px;
}
#bottomDiv
{
position:relative;
}
#tab
{
position:absolute;
top:-40px;
}
</style>
</head>
<body>
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
<div id="tab">Tab</div>
<hr />
DATA DATA DATA
</div>
</body>
</html>
Use top margins, the appropriate display properties and vertical-align:bottom. See the code below + comments for an explanation. You have to set a height and negative margin-top value which is larger than the actual height of the tab's content. Otherwise, the content may jump back to the top.
Relevant HTML/CSS:
<div id="cont">
<div id="tab">
<div id="tab-fix">
Tab
</div>
</div>
Rest of content
</div>
#cont {
margin-top: 30px; /*Reserve space*/
height: 100px;
background: lightgreen;
}
#tab {
display: table; /* Necessary for the application */
margin-top: -30px;/* Move tab to the top*/
}
#tab-fix {
height: 30px; /* Expecting the height to not exceed 30px*/
display: table-cell;
vertical-align: bottom; /* Aligns the content at the bottom*/
}
Fiddle: http://jsfiddle.net/stEW3/2/
Update2
So this is a tough problem to solve! The only thing I could think of was to put a wrapper around the tab. That wrapper needs to be relatively positioned and have a height equal to that of the tab. Then you can use absolute and negative top of 100%.
http://jsfiddle.net/mrtsherman/BC8Xr/2/
Update
With posted code I now understand. How about using absolute and specifying a bottom value of 0?
http://jsfiddle.net/mrtsherman/BC8Xr/
<div id="content">
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
<div id="tab">Something</div>
<hr />
</div>
</div>
#content { border: 1px solid red; position: relative; }
#bottomDiv
{
position:absolute;
bottom: 0px;
}
#tab
{
/*
position:absolute;
top:-40px;
*/
}
Old
Without html structure and a somewhat vague description this is a bit hard to decipher. But this is what I think you mean:
http://jsfiddle.net/mrtsherman/VM99L/
Basically you want the tab above the tabular data to be drawn up into the div before it. You can use a negative top margin for this. Just set it to the same height as the height of your tab. If you have padding on the div then you will need to compensate for that also.
<div id="tabulardata">
<div id="tab">Tab X</div>
<table>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</div>
#tabulardata { margin-top: -50px; }
#tab { height: 50px; width: 80px; background: gray; color: white; }
I need to make an element that takes up a given amount of space (width) such that I can line up several of them together to make a horizontal bar. I can get it to work with absolute position, but I have to manually control 'left' to get the bar segments (rectangles) lined correctly, which is becoming somewhat troublesome. Is there an alternative?
You can do something like this where .rect divs are your boxes:
<style>
#container{
float:left;
position:relative;
}
.rect{
float:left;
height: 50px; /* or whatever you want */
position:relative;
width: 50px; /* or whatever you want */
</style>
<div id="container">
<div class="rect"> </div>
<div class="rect"> </div>
<div class="rect"> </div>
<div class="rect"> </div>
</div>
This would make a horizontal row of .rect boxes corresponding to the width/other css properties of your container.
You can simply float them.
Assuming a vertical stack you can float all inner elements right, give them a clear: left; and put them in an outer element that has a fixed width equal to the largest element.
Assuming a horizontal row, just floating them should be enough.