is there any way to force div to appear on page side by side not one after one.
suppose i have main div like and it has many child div.
<div id='main'>
<div>my content 1 </div>
<div>my content 2 </div>
<div>my content 3 </div>
<div>my content 4 </div>
<div>my content 5 </div>
<div>my content 6 </div>
<div>my content 7 </div>
<div>my content 8 </div>
<div>my content 9 </div>
</div>
now i want that on each line three div will come side by side and there will be some padding....so if three div appear on each line then three line will be required to show all div content. i know css float property can be use to accquire the effect but i am not good in css. so some one help please. thanks
#main div{float:left; width:33%; display:block;}
This should align them next to each other
You could go the float method, or you could use display: inline-block, as per this JSFiddle:
div#main {
width: 500px;
}
div#main div {
width: 30%;
display: inline-block;
/* IE hacks */
*display: inline;
zoom: 1
}
div#main doesn't have to have a width. It's given one here just as a demonstration.
give 1 2 & 3 the attribute float: left;
give 4 the attribute clear: both;
give 4 5 & 6 the attribute float: left;
give 7 the attribute clear: both;
give 7, 8, 9 the attribute float: left;
and please dont use the attribute "padding"! Its displayed differently in each browser!
Use a surrounding div with a margin instead!
If you want the same distance between every element the easiest way is to float the children, set a negative margin on the parent element that has the same size as the margin on the children, and make the parent x times as wide as the children + x times the margin (where x is 3 if you want 3 elements next to each other) like this:
#main { margin: -10px 0 0 -10px; width: 330px}
#main > div { margin: 10px 0 0 10px; width: 100px; float: left;}
Don't forget to set overflow: hidden on the parent if you don't want it to collapse.
You can see an example here: http://jsfiddle.net/mCEGf/
Related
OK, so here is my problem,
I need to have four DIVs in one line. The First three are float:left and the fourth one is float:right. The container has a specified width.
I need the third div to fill all the space from the second div that is floated to the left, to the fourth div that is floated right.
EDIT: DIVs #1, #2 and #4 have dynamic width as well... They have a certain padding and the content defines the width.
Why not turn the question on its head, and establish how to create the layout you want- in which case, likely the simplest approach would be:
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit</div>
<div class='cell'>fit</div>
<div class='cell'>expand</div>
<div class='cell'>fit</div>
</div>
CSS
.table {
display:table;
width:100%; /* <-- will make the divs align across the full browser width */
height:50px;
}
.cell {
display:table-cell;
border:1px solid red;
width:1%; /* <-- will make 1, 2, 4 only fit their content */
}
.cell:nth-child(3) {
width:100%; /* <-- will make 3 expand to the remaining space */
}
Solution Using Floated Elements
Here is one way of doing this using floats.
Arrange your HTML as follows:
<div class="panel-container">
<div class="panel p1">Panel 1 - and a word</div>
<div class="panel p2">Panel 2 - Done. </div>
<div class="panel p4">Panel 4 - End!</div>
<div class="panel p3">Panel 3</div>
</div>
and apply the following CSS:
.panel-container {
width: 600px;
border: 1px dotted blue;
overflow: auto;
}
.panel {
background-color: lightgray;
padding: 5px;
}
.p1 {
float: left;
}
.p2 {
float: left;
}
.p3 {
background-color: tan;
overflow: auto;
}
.p4 {
float: right;
}
The trick is to place the floated elements (.p1, .p2. .p4) ahead of the in-flow content (.p3).
Use overflow: auto on the parent container to keep the floated child elements from affecting the layout outside of the parent element.
I added overflow: auto on .p3 so that the padding gets included within the containing block.
See fiddle at: http://jsfiddle.net/audetwebdesign/9G8rT/
Comments
The one disadvantage of this approach is that the order of the content is altered, that is, .p3 appears after .p4 in the code order.
Another side effect, which may be desirable in a responsive design, is that the child elements will wrap onto 2 or more lines as the parent container width gets smaller.
If you need to retain the content order in the HTML code, the CSS table-cell solution is a good alterantive.
The table-cell solution will keep the child elements on a single line regardless of the width of the parent container.
One final advangtage of the floated element solution is that it is more backward compatible than a CSS table-cell solution, but as we move forward, this is becoming less
of a compelling argument.
http://optimalpages.de/DrupalMusi/
How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?
Thanks!
Actually you are floating only elements to the left without any wrapper element, so what happens is this..
Instead, wrap the other 2 elements inside a wrapper element and than float it to the left
.left_wrap {
float: left;
width: 30%;
}
.right_wrap {
float: left;
width: 70%;
}
.right_wrap > div {
border: 3px solid #ff0;
height: 100px;
}
<div class="main">
<div class="left_wrap">
Hello
</div>
<div class="right_wrap">
World
<div></div>
<div></div>
</div>
</div>
Demo
Better Demo
If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.
Demo
Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like
.clear:after {
content: "";
clear: both;
display: table;
}
And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now
<div class="main clear">
<!-- Floated Elements -->
</div>
I'm not quite sure if this is what you mean but try:
#node-29{
float: right;
clear: left;
margin-left: 0;
}
This will position the div's next to each other and keep the main content to the right.
This can be quite complex depending on your existing theme.
I wrote this page a while back to shows you how you can do that.
http://linux.m2osw.com/3columns
More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.
To make it simpler you can set a specific width to the div and you get something like this:
div.page
{
width: 900px;
margin: 0 auto;
}
That will center the main div.
For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.
we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
background-color:yellow;
}
#main
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<div id="main">
this is how we can display main div in centre
</div>
</body>
</html>
I have three divs inside a parent div with overflow:hidden; and I want to show the third. So I thought, I could give the first div an margin-left and the two other will be shift to the left.
<div style="width:1000px;background:red;overflow:hidden;height:50px;">
<div style="width:1000px;height:50px;float:left;margin-left:-2000px;">
1
</div>
<div style="width:1000px;height:50px;float:left;">
2
</div>
<div style="width:1000px;height:50px;float:left;">
3
</div>
</div>
But it shows the second div. But if I add margin-left:-1000px; to the second div and replace margin-left:-2000px; to -1000px on the first div it will work correctly. I don´t understand why.
When you set -1000px to div, this div is no longer in relative position, so the another divs assumes relative position from parent.
Fiddle Example for testing:
http://jsfiddle.net/FvBwC/5/
<div class="parent">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
.parent { width:1000px; background:red; overflow:hidden; height:50px; }
.one, .two, .three { width: 1000px; height: 50px; float: left; }
.one { background: blue; margin-left: -1000px; }
.two { background: yellow; margin-left: -1000px; }
.three { background: green; }
But for better solution I'd go with display: none in CSS or .hide() in jQuery.
Because the first div is moved 2000 px left outside the parent element. This basically "removes" it from the relative positioning of everything else inside the parent. In other words, the remaining elements are positioned inside the parent as if the first div was never there. Div 2 is positioned relatively as if it was the first element in the parent, i.e. at left:0. If you want to position div 2 outside the parent, you need to explicitly define its position (like setting its margin:-1000px).
To see whats happening clearer, go to your fiddle and set the 3 child divs to width of 100px, keeping the parent at 1000px. Play with the margins some more. You should see whats happening.
EDIT: If all you are trying to do is show a specific div and hide the other two, just set the other two to display:hide.
is there a better way to fix the height of a child to the main parent height?
I tryed so but it doesn't works for me:
.child {
background: none repeat scroll 0 0 #5B6567;
border-radius: 5px 0 0 0;
display: inline-block;
float: left;
line-height: 30px;
padding-top: 6px;
position: relative !important;
text-align: center;
width: 12%;
height:100%
}
<div class="row-fluid">
<div class="child">
child
</div>
</div>
jsfiddle http://jsfiddle.net/WTmt6/1/
check I want the grey left div to fix the height of the red one big .media div
ps: I can't use fixed/px dimensions I only use percentage/% on my layout
I'm still not sure if I understand the problem...
First of all, remove the padding on child as it is going to cause trouble with the height:100%. You should add the padding in an inner div:
.inner {
padding:6px;
}
<div class="child">
<div class="inner">child</div>
</div>
The height 100% is working fine. Here is an example of 3 childs (two of them are equal), floating inside a floating parent without problems: http://jsfiddle.net/qRPYt/7/
If you are still having trouble, please, post the CSS of row-fluid or even better, a jsfiddle.
I have seen many examples in stackoverflow, most of them are with floats- I have a 3 column divs (dont have a parents div) - first column has dynamic width - other 2 have fixed widths - can I get a solution with out using floats - tried giving percentages, did not work - also tried using table-cell - but may be i am not using it in right way - any examples/ideas:
div .first{
margin: 12px 0 5px 225px;
width:580px;
}
div a.second{
margin: -19px 0 5px 470px;
display: block;
}
div a.third{
margin: -15px 0 5px 640px;
display: block;
}
HTML
<div id="container">
<div id="first_dynamic_width" >
<span>abcdsef</span>
</div>
<span> <a> </span>
<span> <a> </span>
</div>
by using display:block you cannot make them side by side because the block means that it is going on the next line. Make them display:inline or display:inline-block so they can move to next to each other and then try to style them again.