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.
Related
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 got a ul list which has several li elements which need to be floated left.
Each li contains an image of variable height either 150px or 200px. So what we get is multiple boxes(li) with images inside them.
This is the exact html inside an li
<li class="photo">
<a href="#" class="photo-link">
<img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
<span class="photo-title">MrSpock</span>
</a>
</li>
Now if an image in any of the li elements is of height 200px and the adjacent li has an image of height 150px, the li with image 150px height stacks up on the top right edge of the li with 200px height. ( Remember both are floated left)
I want the li elements to stack up as if they were boxes of diff height kept on a floor.
Restrictions : I cannot change this html, there can be multiple li elements in which case the images flow to the next row. We do not know in advance if all the images in a row will be of same or diff height.
Is there a CSS only solution possible for this ? Heres a link to my problem :
https://dl.dropboxusercontent.com/u/88049315/home.html
I want the containers in the first row to all align at the bottom.
What about this fiddle?
<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
#container
{
width:200px;
height:200px;
background-color:#333;
display:table-cell;
vertical-align:bottom
}
.content
{
width:48px;
height:48px;
background-color:red;
float:left;
margin: 1px;
}
As long all the floating content together does not have a width larger then the container everything is fine. After that the float functionality takes over and positions the first line one row above the bottom.
Otherwise you could rotate the conainer div so all content in it goes with it. This is more of a hacky way and can cause issues further down the line. The Fiddle
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
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; )
This is what I am trying to do :
HTML
<div class="container">
<div id="one" class="child">One</div>
<div id="two" class="child">Two</div>
<div id="three" class="child">Three</div>
<div id="four" class="child">Four</div>
</div>
CSS
<style type="text/css">
.container{
height:40px;
width:500px;
}
.class{
float:left;
/*...*/
}
</style>
The child divs should fill the container div how big or small it has its width. They can get big according to the container automatically.
|<---One----><---Two---><-Three-><--Four-->|
How can I do it with css?
Thanks in advance.
I've set up a test site to make sure this works:
First, you'll need to keep float to "left" to keep everything on the same row. Next, set width to "25%", to space out the elements. Finally, set text-align to "center" to center the elements, as in your diagram. Remember, if you change the number of elements, you'll need to modify the "25%" to a value that evenly spaces out the elements. (Use 100 / numElements).
.child {
float: left;
width: 25%;
text-align: center;
}
Does anyone know a way to do this without using width percentages, so that it will auto-spread the elements if they are removed or added?
You can set the .child width to 25%, like this:
.child { width 25%; }
You can test it out/play with it here.
Total width is 500 so each child div should be 125px wide. You got the right idea using the float:left;
The solutions that have been given to you are correct. Just be careful if you have margins/borders/paddings in the inner divs, because in that case the 25% would break the layout (margin, borders and paddings are not included in the percentage).