How to make third block below the first?
Now third block below second.
Demo http://jsfiddle.net/SdR6e/1/
HTML
<!DOCTYPE html>
<html>
<body>
<div style="width: 400px;">
<div class="semiblock" style="height: 200px;">
First
</div>
<div class="semiblock" style="height: 100px;">
Second
</div>
<div class="semiblock" style="height: 200px;">
Third
</div>
<div class="semiblock" style="height: 200px;">
Fourth
</div>
</div>
</body>
</html>
CSS
.semiblock {
border: 1px solid black;
float: left;
margin: 0;
width: 198px;
}
I need this:
Try to insert clear:both like this:
DEMO
HTML
<!DOCTYPE html>
<html>
<body>
<div style="width: 400px;">
<div class="semiblock" style="height: 200px;">
First
</div>
<div class="semiblock" style="height: 100px;">
Second
</div>
<div class="clear">
</div>
<div class="semiblock" style="height: 200px;">
Third
</div>
<div class="semiblock" style="height: 200px;">
Fourth
</div>
</div>
</body>
</html>
CSS:
.semiblock {
border: 1px solid black;
float: left;
margin: 0;
width: 198px;
}
.clear {
clear:both;
}
Method of "Alessandro Minoccheri" is good (+1),
but you want , also, just add "clear:left" value in your third block :
<!DOCTYPE html>
<html>
<body>
<div style="width: 400px;">
<div class="semiblock" style="height: 200px;">
First
</div>
<div class="semiblock" style="height: 100px;">
Second
</div>
<div class="semiblock" style="height:200px;clear:left;">
Third
</div>
<div class="semiblock" style="height: 200px;">
Fourth
</div>
</div>
</body>
</html>
Here is the solution: http://jsfiddle.net/SdR6e/2/
Use clear:both; when you want next element below another element.
If you use this with multiple blocks then write it in a class and add class to target elements.
.clearall{
clear:both;
}
Please use below HTML.. and used same CSS OR i have updated your given fiddle. Please check it using below URL.
http://jsfiddle.net/SdR6e/11/
<div style="width: 400px;">
<div class="semiblock" style="height: 200px;">
First
</div>
<div class="semiblock" style="height: 100px;">
Second
</div><div style='clear:both;'></div>
<div class="semiblock" style="height: 200px;">
Third
</div>
<div class="semiblock" style="height: 200px;">
Fourth
</div>
</div>
Related
This question already has an answer here:
flex items ignoring width
(1 answer)
Closed 1 year ago.
I am trying to have a number of columns with exact widths, and their heights split evenly between some number of elements. For some reason, despite my indicating an exact 200px width on each column, they are instead getting a computed width of 162px somehow.
Chrome dev tools is showing some weird arrow thing indicating that it it was shrunk from it's intended size for some reason. I've even tried removing all of the content from the div's as possible so as to rule out some weird interaction with the size of children.
The HTML content for the relevant area is this:
div {
background: rgba(255, 0, 0, .1);
}
<div style="display: flex;">
<div style="width: 200px; margin-right: 100px;">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 400px;"></div>
</div>
</div>
Including some dev-tools highlighting (showing the arrow thing I described) it is rendering like this (the "round" labels at the top are not in the HTML content above but are properly 200px + 100px margin):
I have never seen anything like this before, especially those arrow things from the dev tools. Is there something obvious I'm missing or something I should look for to diagnose this?
Setting display: flex turns the sizing of child elements over to the flex container. If you don't want the individual elements to resize, set flex-grow: 0, flex-shrink: 0, and flex-basis: 200px. You can do all three using the flex shorthand:
flex: 0 0 200px;
.container {
display: flex;
}
.container > * {
flex: 0 0 200px;
margin-right: 100px;
}
div {
background: #cccccccc;
}
<div class="container">
<div style="width: 200px; margin-right: 100px;">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 400px;"></div>
</div>
</div>
This is the default behaviour for Flexbox. If you add up all your widths, so 200 width + the 100 margin, you get 300 * 4 = 1200px. If your viewport is smaller than 1200px then the browser will try to calculate the best width it can to fit all your div along the main axis. thus you are getting 162 + 100 * 4 is just shy of 1200. Try resize your viewport or the browser screen to bigger than this and you should get the expected behaviour.
The arrow you are seeing is Chrome dev tools way of telling you your original width has been made smaller to fit all content.
Code here - http://jsfiddle.net/Cd2Ek/
html -
<div id="main-div" style="height: 250px; margin-left: 10px;">
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small>L1</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
<div class=""><small>L3</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
<div class=""><small>L5</small></div>
</div>
</div>
If you see the output in jsfiddle, the bars are going below the main-div. I think you can guess the actual requirement, all bars should be position from bottom, and if the % is 50, then frm bottom, bar should be upto 50% height of the main div, along with label, % indication.
I think this is what you need - fiddle. I've rearranged your code quite a lot to simplify how it works, but basically it uses absolute positioning to get the bars to stick to the bottom. Please let me know if anything is unclear.
Each bar now uses the HTML:
<div class="bar-container">
<div class="bar" style="height:50%">
<span class="percentage">50%</span>
<span class="label">L1</span>
</div>
</div>
Change your css with below one
.sub-div {
margin-right: 6%;
display: inline-block;
height: 250px;
border: 1px solid green;
**vertical-align:top;**
}
Try above code...
CSS
You missed aligning the bars add this line in you .sub-div css class
vertical-align: top;
DEMO
This probably is the most frequently asked question however I am not really able to find anything that seems to work for me - I am a newbie # styling/css.
I would like a cross browser compliant solution (IE9 or higher btw) where I can have as a header (first row) 3 columns:
Name_____DOB______Contact
underneath, there will be content. a row of data and I want the row of data (which is contained in a div) to be aligned correctly with the column headings.
Currently I have this:
<div style="width: 100%">
<div style="width: 300px; float:left">Name</div>
<div style="width: 200px; float:left">DOB</div>
<div style="width: 100px; float:left">Contact</div>
</div>
in terms of the data, I am using MVC4 with Razor so I am just using a for loop to go through a collection of data and spitting it out in a div i.e:
[for loop here]
<div id="refitem_#counter">
[data here]
</div>
[end for loop]
You can continue with the same approach.
<div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name</div>
<div style="width: 200px; float:left">DOB</div>
<div style="width: 100px; float:left">Contact</div>
</div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name 1</div>
<div style="width: 200px; float:left">DOB 1</div>
<div style="width: 100px; float:left">Contact 1</div>
</div>
<div style="width: 100%">
<div style="width: 300px; float:left">Name 2</div>
<div style="width: 200px; float:left">DOB 2</div>
<div style="width: 100px; float:left">Contact 2</div>
</div>
..
</div>
I'm strongly dis-advise you to use that. use a table instead.
also (as a BTY): don't mix your markup and CSS, use something like that.
HTML:
<div>
<div>
<div class="column col1">Name</div>
<div class="column col2">DOB</div>
<div class="column col3">Contact</div>
</div>
<div>
<div class="column col1">Name 1</div>
<div class="column col2">DOB 1</div>
<div class="column col3">Contact 1</div>
</div>
<div>
<div class="column col1">Name 2</div>
<div class="column col2">DOB 2</div>
<div class="column col3">Contact 2</div>
</div>
..
</div>
CSS:
.column
{
float: left;
}
.col1
{
width: 300px;
}
.col2
{
width: 200px;
}
.col3
{
width: 100px;
}
width: 100%; is the default behaviour for a block element (like a div) so you should omit it.
I have the following HTML:
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
</div>
</div>
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 200px;"></div>
</div>
</div>
</div>
</article>
I am using display: table-row because I heard that this would make my DIVs work like table cells and I was wanting the DIVs to be the same height. However it seems like the first grid_6 grid has a small height while the second has at least 100px. How can I make it fill to be the same height?
Here's an example: fiddle
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
You have set the height of second element i.e Height = 100px .
Set the height to both the div elements .
Both grid_6 elements are the same height. The reason why you see one red rectangle larger than the other is you are coloring the inside divs. If you put the color on the grid_6 elements - they are the same. http://jsfiddle.net/A7yXc/
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 100px;">das</div>
</div>
</div>
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 200px;">das</div>
</div>
</div>
</div>
i am trying to reduce the the width of slider using boot strap responsive css to display it in iphone
but i am not able to do it
can you please help me with it
http://jsfiddle.net/CXkQp/4/
screenshot
https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit
providing my code below
<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
<div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:100%">
<div class="container">
<div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
</div>
<nav class="da-arrows" style="width: 100%">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
</div>
</div>
</div>
</div>
A couple of points to get you started. In your jsFiddle, there doesn't seem to be a closing tag for your container div # line 120.
Also you want your slider to scale but it's not inside a fluid row div. I think your bootstrap grid needs work. Check the structure for fluid grid carefully: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Hope this helps.