I'm trying to create two floating divs inside of another:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="height:30px;text-align:center;position:relative; "><h2>welcome</h2></div>
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
</div>
</div>
</div>
The problem is the floating div1 and div2 are outside the border of the div with id "borderdiv". What am I doing incorrectly?
Floated elements have no height, so #borderdiv does not expand to contain them.
You can use a clearing element to correct this:
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="clear: both" />
Demo on JSFiddle.net
Since your question was not very specific, then my answer is very simple. This simply puts the div1 and div2 inside the borderdiv:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="height:30px;text-align:center;position:relative;"><h2>welcome</h2></div>
</div>
</div>
</div>
Related
I am trying to make the <div> with class col-md-6 to be always positioned in the right end of the row even while scrolling horizontally.Here is an illustration.
<div class="row">
<div id="div1" class="col-md-6">.col-md-6</div>
<div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>
When we scroll horizontally i want div2 to remain in the last 6 columns of the window Which is not happening.The div itself is going out of the view.
Can you please specify or give some references to achieve this?I'm using Bootstrap-v3.3.0
You can set the second div to absolute position, and make it keeps the right always at the border of the screen using some jQuery.
CSS:
[class*="col-"] {
background: #F2FAFF;
border: 0px solid #B1D8ED;
display:inline-block;
}
.test{
width:2000px;
background: #F2F79F;
border: 0px solid #B1D8ED;
}
#fixed{
position:absolute;
}
HTML:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
LARGER DIV
</div>
Javascript:
$(window).scroll(function(){
$('#fixed').css('right', $(this).scrollLeft() * -1);
});
Example:
http://www.bootply.com/yeKqMVA91r
Why not just wrap the larger div in a scrollable element like so:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12" style="overflow:scroll;">
<div class="test">LARGER DIV</div>
</div>
</div>
I have a page that essentially behaving as I want it, except that I would like to place an image every so often along a horizontal scroll track. This JS Fiddle shows the code: http://jsfiddle.net/bretwhiteley/39cLc0vm/
So what I am trying to do is add an image that is the height of the "Scrolling" DIV 1000px from the left. I tried to use the following code, with no luck:
<div class="Timeline_Break" style="margin-left:1000px;">
<div style="margin-left:1000px"><img src="http://s.w-x.co/TWC_logo_100x100.gif" style="width:20px;height:130px"></div>
</div>
The Styling is:
.Timeline_Break {
position: fixed;
z-index: 99;
}
test this code
jsfiddle
<div id="Header">
Google Chart ...
</div>
<div id="Map">Map</div>
<div id="Footer">
<div id="FooterLeft">
<div class="Timeline_Title">Industry</div>
<div class="Timeline_Title">Infrastructure</div>
<div class="Timeline_Title">Individuals</div>
</div>
<div id="FooterRight">
<div id="Scrolling">
<div class="Timeline_Banner">
<div style="margin-left:400px;"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:700px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:200px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div style="color:red;position:relative">
<div style="color:blue;position:absolute;top:0px;left:500px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:130px">
</div>
</div>
</div>
</div>
</div>
HTML
<div id="outer_div" style="overflow:auto; width:1238px; height:310px;">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;">
</div>
<div id="child2" style="width:400px;">
</div>
<div id="child3" style="width:300px;">
</div>
<div id="child4" style="width:500px;">
</div>
<div id="child5" style="width:300px;">
</div>
<div id="child6" style="width:600px;">
</div>
</div>
</div>
What I want is the inner_div's width should go beyond the outer_div and child divs will remain on same line. I am adding child divs into inner_div by using jquery prepend and append method. Currently the maximum width inner_div is taking the width of outer_div and after that the line breaks.
I tried with display:inline-block, overflow:auto; and width:auto on inner_div but its not working.
Currently I am getting it to work using jquery by adding width dynamically to inner_div as I am dynamically adding child divs into inner_div. I would like to achieve it using css if possible.
Use table and table-cell properties to achieve this.
#inner_div{display:table;}
#inner_div div{display:table-cell;}
DEMO
you should use min-width on outer_div and float(or display:inline-block) on children of inner_div .
or use position absoulote on inner_div:
<div id="outer_div" style="min-width:1238px; height:310px">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
or if you want fixed width of outer_div you can use position:
<div id="outer_div" style="width:1238px; height:310px;position:relative;white-space: nowrap;">
<div id="inner_div" style="height:300px;position:absolute; top:0 ">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
by display table , inner_div can't get width larger than 1238!
also, I think , you can't add new element by css!
I am having some issues with my CSS four-column table.
When one of the pictures is shorter, it goes out of whack. (see screenshot)
This is the CSS :
#results{background:#fff;padding:0 0 26px}
.result{float:left;width:25%}
.result-cover{border:1px solid #ccc;margin:0 4px 8px;padding:0 0 6px}
.result-img{border:1px solid #ccc;height:auto;margin:9px;overflow:hidden}
.result-img img{display:block;margin:0;width:100%}
.result .row{background:#fff;font:400 16px/20px 'MdCn',Arial,sans-serif;height:18px;overflow:hidden;padding:0 10px;text-transform:uppercase}
.result .row.stripe{background:#f6f9fb}
.result .row:last-child{font-family:'BdCn',Arial,sans-serif}
.prop{color:#373736;float:left;width:40%}
.value{color:#0f92cb;float:right;width:60%}
This is my HTML snippet :
<div id="results" class="clr">
<div id="results-inside" class="clr block">
<div class="result">
<div class="result-cover">
<div class="result-img"><img src="images/res.jpg" alt="" /></div>
<a class="result-title" href="#">31698-1</a>
<div class="result-props">
<div class="row clr">
<div class="prop">Code1:</div>
<div class="value">29A</div>
</div>
<div class="row clr">
<div class="prop">Code2:</div>
<div class="value">24A0</div>
</div>
<div class="row clr">
<div class="prop">Code3:</div>
<div class="value">0</div>
</div>
<div class="row clr">
<div class="prop">Code4:</div>
<div class="value">627A</div>
</div>
</div>
</div>
But when one of the pictures is shorter the alignment goes wonky.
What you could do is add a div around your 4 blocks and float it left and give it a width of 100% that would clear each row.
Solved my issue using :nth-child()
Thank you CBroe.
I realize :nth-child() may not work with older browser.
But that is not an issue for my case.
Thank you
I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/