How to make divs float on both ends of another div?
Tags: html,css
Problem :
I have tried this so far,
I am trying to place 2 divs in the left and right ends of another div, I tried using float:left and float:right but they are showing up in new Lines
I want something like this,
[[leftcap]................. TITLE ............... [rightcap]]
I'm really sorry I can't represent better than this.
HTML
<div id="shell">
<div id="title">
<div id='leftcap'>o</div>
TITLE HERE
<div id='rightcap'>x</div>
</div>
<div id="content">Content</div>
</div>
CSS
#shell {
width:500px;
height:300px;
background:lightGrey;
}
#title {
background:green;
padding:5px;
border-radius:25%;
text-align:center;
}
#content
{
text-align:center;
vertical-align:center;
}
#leftcap
{
width:10%;
}
#rightcap
{
width:10%;
}
#leftcap,#rightcap
{
height:100%;
width:10%;
background:red;
}
UPDATE: Using float property solved the problem, I have another question, how to vertically center align the text in a container div ?
Solution :
What you need is CSS's float
property which kind of forces an element to be aligned either left or right.
Updated fiddle: http://jsfiddle.net/BXSJe/820/
Hope this helped. :)
CSS Howto..
are you looking for something like this? .box{ float:right; width:173px; height:173px; margin-top:10px; } .box:hover{ width:220px; height:220px; margin-left:-47px; position:relative; } edit: a css example of @malcom's choice: .box{ float:right; width:200px; height:200px;...
This isn't exactly a bootstrap issue - when you set padding and margin as a % value, like in your example, the % is calculated from the width of the...
Adding another height with !important (height: 35px !important;) at the end of the CSS will override the previous height. Also i have changed .locals-list>img to .locals-list img. Refer below code....
This is an example for one way this could be done. Of course, you can experiment with diff methods and stuff, but this is a basic working solution. A dropdown...
I don't see how you can possibly fix this. I wonder if this is a Firefox bug? The only thing that comes to mind is to use box-shadow instead of...
Here you are SIR demo: http://jsfiddle.net/7UjgL/ the style: .letter{ width:40px; height:20px; position:relative; letter-spacing: 26px; } .letter:first-letter{ color:red; } .letter:before,.letter:after{ position:absolute; top: 0px; } .letter:before{ content: 'o'; color: green; left: 11px;...
I figured out jQuery mobile has a whole section on select menu, and I can adjust its css to get what I want.
Simple way to do it: .button { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 400px; } This will horizontally and vertically align your button....
I created a JSFiddle and your code works. The only difference is how the information is logged. function consolelog(message){ var element = $("#log"); element.append(message); } ...
Looking at your screenshot, it appears you want the leaf background tiled everywhere accept for underneath the white container, which should just be grey. You could tile the main container...
The CSS specification spells this out definitively: Comments begin with the characters /* and end with the characters */. They may occur anywhere between tokens, and their contents have no...
I can think of two alternative approaches: Post process getDirectoryContents Call getDirectoryContents then filter out the values you don't care about. Something like: xs <- getDirectoryFiles "" ["//*.js"] need [x...
If you don't want to change your HTML or CSS, change your JQuery to this: $(document).ready(function () { $('.showHide').click(function() { $(this).next().find('li').slideToggle('slow'); }); }); EDIT: Here is a basic version with...
Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would...
If in Perl using WWW::Selenium then it's simply: my $val = $selenium->get_value("css=input[name='myInput']"); If using another language then the Selenium library should support a get_value function/method....
try https://jsfiddle.net/jr9wsr49/ CSS .someclass + div:not(.someclass) { background:green } ...
You could try something like this : h2, .examples { float:left; margin: 10px; display:block; } You can see it here http://jsfiddle.net/Phenix/Mwtdb/...
Do like this #cer_actuals td { padding-left: 5px; font-family: Verdana; font-size: 9pt; font-weight: normal; height: 0px; border: 1px solid grey; } DEMO...
DEMO updated to use the general sibling selector instead of adjacent sibling selector CSS: /*styled relative to the label*/ label {display:block;} label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;} label ~...
SVG Here made a <svg> example of your mock up. You can add an SVG <A> element for linking calls etc. What I did was add path for the red...
Create a custom binding handler to initialize and update the jScrollPane instance: ko.bindingHandlers.jScrollPane = { init: function(element, valueAccessor) { var o = valueAccessor() || {}; // initialize $(element).jScrollPane(o.options); var reinit...
Found the answer from this comment: How to create custom style mapping in cytoscape.js? The correct way is to use selectors based on the data: node[?n_phosphorylated] { color: blue; }...
welcome to Stack Overflow! It would be very helpful if you filled us in on what you've tried or specifically how the ivh-treeview documentation is not clear. As one of...
From comments: Take an example on Twitter Bootstrap. Collumns have the same right and left padding padding: 0 20px; and rows will negate that padding via margin: 0 -20px; causing...
You can use straight CSS: .menu-item h4:hover { height: 300px; } .menu-item h4 { height: 50px; } if you want to use jQuery you can do: $(".menu-item h4").hover( function(){ //Mouse...
You need to use the colspan attribute. td{ padding: 5px; border: 1px solid; text-align: center; } <table cellspacing="0"> <tr> <td colspan="2"> Table Name </td> </tr> <tr> <td>record 1</td> <td>record 2</td>...
Should just be background-image:url('image.jpg'); background-image documentation is readily available if you look for it...
I don't think you can do it in css alone. But you can use jQuery. A simple if condition would suffice. var width = $('selector').width(); if (width > 500 &&...
See http://jsfiddle.net/kfVGf/2/ .moduleCard{ font-size:60px !important; padding:0 4px; display: inline-block; vertical-align: middle; } Result: Note: unless you have a valid reason for it, avoid to use !important...
I guess I figured how to do that with a bit of additional html and absolute positioning: <div id="parent"> <div class="nest"> <div class="content">One</div> <div class="nest"> <div class="content">Two</div> <div class="nest"> <div...