I know the answer is very simple, it's probably one little CSS property, but I've tried to find the solution without asking it here, no luck..
There are two div containers within a div container, and they aren't playing nice.
The one is positioned to float right in the upper righthand corner of the parent div, and it won't let any other container float to the right of it.
I tried display:inline and display:inline-block but no luck...
Here's the code, though something tells me the answer is so easy you won't need it!:
The parent div, the upper righthand corner div, and the poor div trying to float right:
#um-home-section4 {
width:100%;
height:300px;
background-color: green;
}
#um-title-right {
float:right;
width:500px;
height:50px;
margin-right:20px;
margin-top:20px;
background-color: fuchsia;
}
#take-me-there {
float:right;
margin-top:240px;
margin-right:0px;
height:50px;
width:100px;
background-color: gray;
}
<div id="um-home-section4">
<div id="um-title-right"></div>
<div id="take-me-there"></div>
</div>
You just need to change the order in your HTML :
<div id="um-home-section4">
<div id="take-me-there">
</div>
<div id="um-title-right">
</div>
</div>
See this demo http://jsfiddle.net/Rk4mr/11/
Related
Is there any way to get the following box model to work.
I have 2 div's in a container that should be displayed side by side.
The problem I have is that I must push the left div by certain number
Also trying to stay away from negative margin on right div because it is
braking the responsive layout.
http://jsfiddle.net/Ubg6H/1/
<div id="header">
<div id="left"></div>
<div id="right">
<div class="box">
<div class="box_in">Sample</div>
</div>
<div class="box">
<div class="box_in">Sample</div>
</div>
<div class="box">
<div class="box_in">Sample</div>
</div>
</div>
</div>
#header {
width:800px;
margin:0 auto;
overflow:hidden;
background:#ccc;
padding:15px;
}
#left, #right {
display:table;
background:green;
height:200px;
}
#left {
width:20%;
float:left;
margin-left:10px;
}
#right {
width:80%;
float:right;
margin-left:10px;
}
.box {
width:33.33%;
float:left;
}
.box_in {
background:red;
margin:10px;
display:block;
height:100px;
}
Any help is appreciated.
Here is the solution
http://jsfiddle.net/Ubg6H/6/
use
display:table;
and
display:table-cell;
Thnx to
http://mihaifrentiu.com/how-to-fill-the-available-space-when-using-floated-divs
All you need to do is reduce the width of your right div and it will slide up to be side by side. I think you have a few other things you should probably rework to work well responsively. But anyways the problem is there isn't space for both divs to fit side by side currently. So you can fix it by reducing margin or reducing width.
Edit:
I'm definitely not into magic numbers, but as CodeMonkeyG said, there is a difference between magic numbers and mathematics. You could however use the css calc to calculate the difference. So for example: you would have the percentage be the fluid width and the 80px be what ever your fix margin and padding would equal.
width: calc(100% - 80px);
You can also choose to do percentage based margins and padding if you so desire. Calc is probably going to give you better control though. Unless you plan on continuing with some media queries.
change to this
#right {
width:77%;
float:right;
margin-left:10px;}
The #right{width:80%;} is too much with the margin so it moved #right below the left div
http://jsfiddle.net/Ubg6H/3/
I have a fixed-width left div, and I want to make the right div fill the remaining space.
So far I've been taking this approach recommended by another SO poster, but it doesn't work if I have content inside the right div.
The content in the right div is set to width: 100%, so I would expect it to be no wider than the right-hand div, but it overflows the right div.
<div>
<div id="left">left</div>
<div id="right">right<div id="insideright">overflows</div</div>
</div>
<style>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
#insideright {
width: 100%;
background-color: blue;
height: 5px;
}
</style>
JSFiddle here, demoing the problem: http://jsfiddle.net/MHeqG/155/
What can I do?
I want to support older IE browsers, so I'd rather not use display: table-cell etc if I can avoid it, or at least not without a reasonable fallback.
Actually it's pretty simple... don't add 100% to the right div :)
just add the overflow property
LIVE DEMO
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
overflow:auto;
background-color:#00FF00;
}
#insideright {
background-color: blue;
}
...and if you even wondered how to make the red (left) div fill the remaining height...
DEMO
Not sure exactly what you're trying to do (your references to right are ambiguous). But if I'm understanding, you want the insideright to be nested within the right without overflowing?
Why not use a <span> instead? <div> out of the box is display: block; which will force a wrap like that. Alternatively, override this behavior by using display: inline; or display: inline-block;.
<div>
<div id="left">
left
</div>
<div id="right">
right
<span id="insideright">this should not overflow right</span>
</div>
</div>
http://jsfiddle.net/brandonscript/MHeqG/157/
I sometimes get confused with divs when I try and build a little more complicated layout than normal.
I have made a quick example showing what my current problem is:
EDIT: UPDATED jsFIDDLE
Sorry, it's a little messy, but I'm just trying to get it to work. As you can see, I have forced a height on one of the vertical lines (but thats ok. that line is supposed to be fixed height). The vertical line I have problems with is the one between "Pictures for download" and "videos for download"
http://jsfiddle.net/GLjND/
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
I have lots of div's, and I guess my problem lies within some parent somewhere, but I cant figure it out.
Basically I have a wrapper,and I have 2 areas of content. In this example, those are "first" and "third".
The "second" is a vertical dotted line that I want to stick in-between these to areas, and the height of this div (which contains a vertical dotted image with repeat-y) should matsh the height of the wrapper, which in turn is defined by the largest of the two other divs ("first" and "third").
How would I do this?
Thanks in advance! :)
Here you go.
http://jsfiddle.net/GLjND/3/ (the yellow background is just so you can see the new div)
Just give the divs
display: table-cell
and you're done.
Here it is - fiddle
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
body{
padding:0;
margin:0;
}
#wrapper{
width:500px;
height:auto;
background:red;
}
#first{
display: table-cell;
width:230px;
height:300px;
background:blue;
}
#second{
display: table-cell;
background:white;
border-left: thick dotted #ff0000;
}
#third{
display: table-cell;
width:270px;
height:350px;
background:green;
}
When you are using float property, i recommend you to set overflow:hidden to the parent div
#wrapper{
overflow:hidden;
}
And for the #second u have set the height to 100%, for this to work u should fix an height for the parent div
#wrapper{
height:400px;
}
Here is the Jsfiddle
Hope this will a good solution and will be more informative
Just give the CSS property:
overflow : hidden
display : table-cell
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).