I have some divs in my layout having 50% width. Each div may have a variable height depending on its content. What I would like to do is "floating" them to the top. This means that each div fills gaps with above divs. Something like that:
Is it possible to achieve this effect with some CSS? Of course, width can also be set to other values, not only 50%. Thanks in advance.
You can change the html markup as follows
<div class="left col50">
<div class="first"></div>
<div class="third"></div>
</div>
<div class="right col50">
<div class="second"></div>
<div class="fourth"></div>
</div>
and the css
.col50{
width:50%;
}
.right,.left{
float:left;
}
Related
I'm new in bootstrap and I don't know if it's possible to have bootstrap containers wrapped in another element, Or if that wrapper can have some width, something like this,
<div style="background:url('xycv.jpg') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
<div style="background:url('bla.png') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
Or what happens if wrapper will have width:950px?
.container-fluid itself behaves like your wrapper, so your wrapper is kind of obsolete. Setting the background on the .container-fluid is what I would do.
If you need to wrap some bootstrap elements in your own element, you sure can do this.
yes you can have, only in case when you are using container-fluid class.
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
I don't know if this can be done with CSS, but before going the JavaScript way, I would like to know if it's possible to center (as a whole) a set of absolute positionned divs:
<div id="container">
<div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
<div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
<div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
<div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>
I would like to center the bounding box of those items in the page.
Of course since they're styled with "position:absolute", they're out of the flow, so the container div has a size of 0 px... and the usual tricks didn't work.
Finally, the snippet above being just illustrative, in practice the items would be arbitrarily positionned (some of them dynamically), and their size and content is not known (and can be dynamic too). Because of all this dynamicity, I would prefer to have everything handled by CSS is possible, rather than having hook a whole bunch of events.
Hey now you can change your html and css than u can easily as like this
HTML
<div id="container">
<div id="item1">...some content...</div>
<div id="item2">...some content...</div>
<div id="item3">...some content...</div>
<div id="item4">...some content...</div>
</div>
Css
#container{
background:red;
overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
margin:10px;
margin-left:100px;
}
Live demo
How about to give a fix width to #container and giving a position:relative;
Please check this http://jsfiddle.net/65vk2/
I've got a set of divs in my page with some images inside of them. I would like them to be arranged horizontally instead of vertically ie:
X X X X X
X X X X X
Instead of
X
X
X
...
X
I've tried using the float, position:absolute properties but when using them the elements are "unattached" from the normal flow of the document and positioned outwith the content area.
What is the best way to position elements in such a way without altering the normal flow of the document?
Edit:
<div id="content" class="column"><div class="section">
<h6 id="choose">CHOOSE WHAT YOUR PLANB IS</h6>
<div class="region region-content">
<div class="canvas-wrapper">
<div class="canvas-triangle" id="one">
<canvas id="one"></canvas>
</div>
<div class="triangle-caption">One</div>
</div>
<div class="canvas-wrapper">
<div class="canvas-triangle" id="two">
<canvas id="two"></canvas>
</div>
<div class="triangle-caption">Two</div>
</div>
//ANOTHER 8 LIKE THAT
</div>
</div>
That's the code I have that creates the divs with the images in them. What I would like to do is arrange them as indicated above. Let me know if you need any more details.
Thanks
You don't need to use position, just use float:left for the divs you want in a row. Than you can use some element with clear:left under those divs, so the divs will not overlay this element or any other element further in the code...
edit:
To understand it, try this code with and without clear:
#wrap {width: 500px; background:#ffa;}
div.row {float:left; width:150px; height:150px; background:#aff}
div.right {float:right; height:250px;}
div.clear {clear:left; width: 250px; background:#faf}
<div id="wrap">
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row right"><p>right</p></div>
<div class="clear"><p>clear</p></div>
<p>Lorem ipsum dolor sit...... </p>
</div>
Also notice the difference if you use clear with value left or both in this case.
Get rid of the absolute positioning. You should give us something more to play with if that's not enough help.
EDIT: See this jsfiddle and let me know what's not clear: http://jsfiddle.net/FH7cg/.
I've got the following HTML code:
<body>
<div id="Frame">
<div id="Body">
<div id="Panel">Side panel, fixed width.</div>
<div id="Content">The rest of the content, should be dynamic width and fill up rest of space horizontally.</div>
</div>
<div id="Foot">
<div>FooBar.</div>
</div>
</div>
</body>
What I'm trying to do is make it so that #Panel is of a fixed width (~200 pixels) and on the left hand side, and that #Content is immediately to the right of #Panel but is of "dynamic" width and fills the rest of the space in the browser screen horizontally. I've tried a lot of different things but haven't been able to get it working -- the farthest I've gotten is to the point where #Panel is on the left and #Content is to the right of #Panel and fills of the rest of the space, but #Content starts below #Panel whereas I'd like it to start at the same vertical position.
I did find In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?, however I wasn't able to apply it to the HTML above.
Here's that link, applied to your code:
CSS
#frame { background:pink }
#panel { background:orange; width:200px; float:left }
#content { background:khaki; margin-left:200px }
#foot { background:cornflowerblue }
HTML
<div id='frame'>
<div id='body'>
<div id='panel'>
Side panel, fixed width.
</div>
<div id='content'>
The rest of the content, should be dynamic width and fill up rest of space
horizontally.
</div>
</div><!-- End #body -->
<div id='foot'>
<div>FooBar.</div>
</div>
</div><!-- End #frame -->
Works pretty well! Although, IMHO, you don't need the frame or body (but I don't know the master plan). That would look like this:
<div id='panel'>
Side panel, fixed width.
</div>
<div id='content'>
The rest of the content, should be dynamic width and fill up rest of space
horizontally.
</div>
<div id='foot'>
<div>FooBar.</div>
</div>