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.
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 something like this:
<div class="top">top</div>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
Relevant code in jsFiddle
As you can see, between top and bottom divs, there is a div container. I want this div container to move bottom dive as much as is needed (and i don't want it to be a fixed value - that means if, lets say left container will get much higher - the bottom div will be pushed down as well.
How can i do that?
This is a simple seeming problem that ends up being kind of tricky. The above suggestion about position:relative vs. position:absolute are a good first step. After that you need to make some room for the set width right div:
.left {
height: 100%;
min-height: 50px;
border:1px dashed red;
padding-right: 50px; <---
}
Then float your right div in the space you made:
.right {
float:right; <---
width: 50px; (This needs to match the padding-right value above.)
text-align: right;
min-height: 50px;
height: 100%;
border:1px dashed blue;
}
Finally, put the right div before the left div in the html:
<div class="top">top</div>
<div class="container">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="bottom">bottom</div>
(Tested in Chrome and IE.)
See: Right div fix width, left div extend to max width?
You can check out a fiddle here: http://jsfiddle.net/x3QfG/1/
Will that work for you?
Right now you're using absolute positions for the left/right div's, so you will always need to know the height in order to position the bottom div correctly. What you want to do is float these instead, then clear the floats in the bottom div. That way the left/right can be as high as their contents, and the bottom div will always appear below.
.bottom {
clear: both;
}
.left {
float: left;
width: 50%;
min-height: 50px;
}
.right {
float: right;
width: 50%;
min-height: 150px;
}
I've modified your jsFiddle accordingly, and made the right div higher to show how the bottom always appears below.
Use floats rather than positioning them absolutely. That will make your architecture very much fluid and flexible.
After you apply necessary float values to your .left and .right, use a clearfix hack to contain your floated elements within the container. Now whenever any of the .left or .right divs increase in height, the bottom div will be pushed down.
Make Container Relative and left and right absolute,and for positioning set width rather than using float.
With CSS alone, is it possible to obtain the following example, http://jsfiddle.net/LdJ7t/, without explicity knowing the child element's width before hand?
The final result desired:
parent element scrollable to child element
child element's width set to content
#Parent {
width: 100px;
height:200px;
background: #ccc;
overflow:auto;
padding: .5em;
margin: .5em;
}
#Child {
width:300px;
height:100px;
background:yellow;
}
<div id="Parent">
<div id="Child">
This is a test. This is a test.
</div>
</div>
It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/
I think this is possible. I just can't find a solution.
Your inline-block solution is correct - if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.
If you don't want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/
I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.
Assuming the elements are after body. Give 100% to the body, and all the div
body, #div1, #div2 { height: 100%; }
If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.
#parent { height: 800px; }
#div1,#div2 { height: 100%; }
Enclose those divs in a parent div, and set their height to 100%.
You simply need a three-column (X)HTML + CSS Layout.
It's here
Let insert a parent div (container of those two adjacent divs)
add a property 'display: flex;' to the parent div
.parent{
display: flex;
}
.child1, .child2{
padding: 10px;
border: 1px solid gray;
}
<body>
<div class="parent">
<div class="child1">
CHILD 1 AREA<br />
CHILD 1 AREA
</div>
<div class="child2">
CHILD 2 AREA
</div>
</div>
</body>