I'm having a simple problem concerning the arrangement of floating divs with variables heights.
The goal:
The result:
I just have div containers with css float: left; and no height defined. The first red circle indicated that my technique fails, although the second one proves me wrong by showing it IS working. Unfortunately, the last (not on screenshots) just starts floating after the height of the previous one (so there's a whole empty space on the left).
How should i solve this?
Thanks!
I don't think that this is doable a 100% with "just" css, but jquery-masonry should do the trick [ http://desandro.com/resources/jquery-masonry/ ]. Well, but i hope somebody proofs me wrong :)
You have two columns. Then code it accordingly:
<div class="column">
contents of first column
</div>
<div class="column">
contents of second column
</div>
(you set float:left on the column DIVs)
Related
I have spent a while with solving the following problem:
I would love to wrap the "infinite" number of floated div by four in column (and different for smaller media width) by adding clear:left to the each fifth element;
I made a fiddle where it works just fine.
https://jsfiddle.net/kybernaut/zqnkxa3h/1/
But no matter whatever I do, in the real situation the layout gets broken (two last items are wrongly wrapped, when I set it back to :nth-child(4n+1), it breaks a different way completely.
Is there anything I'm missing on that page? I have no idea how to fix it myself. The class is .bundled_product
All of your .component-data containers have a first child .kbnt-items and a second child .min_max_items. The last .component-data container is missing the .kbnt-items child, that's why the third child of this container is the second .bundled_product here.
<div class="component_data">
<div class="kbnt-items">0/1</div> <!-- missing in your last component_data... -->
<div class="min_max_items"></div>
<div class="bundled_prodct">...</div>
<div class="bundled_prodct">...</div> <!-- ... that's why this one is the '4n+3' element -->
</div>
Your last item has the class ..bundled_product:nth-child(4n+3) which contains clear: left, that's why it is put in a new line.
In a previous question I got some excellent answers for placing 3 boxes in a row:
Can I place boxes three in each row, equally spaced and glued to container on left and right?
There is a nagging problem there. For the solution to work I have to put font-size:0 on the container. Which means I have to specify absolute values for fonts in the boxes.
Not really what I always want. Can I avoid that font-size:0?
Here is a new fiddle: http://jsfiddle.net/lborgman/BUYZ3/2/
Yes, you can avoid it by not leaving any whitespace in the markup between those elements..
One way to do that is to use html comments between the elements (in order to keep the code formatting you want)
<div id="container"><!--
--><div>one</div><!--
--><div></div><!--
--><div>three</div><!--
--><div>four</div><!--
--><div>five</div><!--
--></div>
demo at http://jsfiddle.net/BUYZ3/4/
The other is to just remove the whitespace
<div id="container"><div>one</div><div></div><div>three</div><div>four</div><div>five</div></div>
demo at http://jsfiddle.net/BUYZ3/5/
For this specific example you could also (more appropriate really..) float the elements..
float:left;
http://jsfiddle.net/BUYZ3/6/
I'm trying to centre multiple div elements on a page. Some however need to not be centered so I've ruled out using the body element for this. I've figured there would be three ways to do this:
The first would be by using a container, however this adds an element for pure layout styling and isn't very semantic.
<div id="notcentred">
<div id="container">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
</div>
The second would be to create a centre class and simply adding it to each element that needs to be centered.
<div id="notcentred">
<div id="centrediv1" class="centre"></div>
<div id="centrediv2"class="centre"></div>
The third would be to add the centre CSS to each DIV's id.
<div id="notcentered">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
I would think number 2 would be best, as it would be the easiest to manage, and the most semantic, but if there is anything I'm unaware of, options would be welcome.
Thanks in advance.
This is the exact use classes were designed for. So, really, using idealistic CSS the third one is wrong. The first two are absolutely fine.
Although, if you want all the divs to be similar, putting some in a wrapper div may make it harder to style their other settings. The second also allows you to more easily have centered divs dispersed among non-centered divs. The second also has fewer elements, which will make your code a lot easier to read!
With this in mind, I would recommend the second.
I have gone through a long tutorial on W3Schooles to learn CSS; I learnt some basics but still miss my primary aim: Positioning DIVs
This is what I'm trying to do
*---------*---------*
* * *
* * *
*---------*---------*
My goal is simple and trivial for some, but I'm having headaches doing this the right way, in fact I did it but it has lot of problems when I add more text to the DIVs or they simply merge with another DIVs
What I did is simply play with margin and padding values using FireBug. All I need now is to learn me this simple (I hope) trick, what I'm missing is: how this simple positioning works? Shall I use absolute, relative positioning? Change the margin, the padding, the size??
If you have a good tutorial explaining this point, so please point it. I had other headaches looking for that on Google.
It looks like you are trying to float two columns next to each other. This is fairly simple and covered in depth here :
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
I tend to stay away from the position property unless I have to overlay some elements.
Creating a 2 column layout in CSS
Personally, I don't like using a clear:both on a br tag.
Use overflow: auto on the parent div instead
<div class="container" style="overflow: auto">
<div style="width:300px;float:left"><p>left column</p></div>
<div style="width:300px;float:left"><p>right column</p></div>
</div>
I've had good luck emulating the code found in the 960 grid system.
The right way is hard because many things aren't really cross browser compatible. Browsers are getting better, but its still a nightmare if you have to use anything IE compatible. (lots of hacks)
With absolute positioning you can absolutely place any of your div's. the drawback being that they are stuck in those positions no matter the resolution or the size of the window displaying your page.
What you could do is float your left column to the left, and then not specify floating on the right column. Keep the default positioning by not specifying absolute nor relative, then just adjust the widths of the elements as needed.
If you are okay with setting specific widths on your divs, the following has worked well for me:
<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>
The "float: left" makes the columns line up side-by-side. The last div (with the clear: both) makes it so that anything you put after the columns stays below the columns. This way, you can change the width of either column without messing with the styling of the other.
<div class="container">
<div style="width:300px;float:left"><p>left column</p></div>
<div style="width:300px;float:left"><p>right column</p></div>
<br style="clear:both" />
</div>
I'm trying to practice some CSS/HTML, and I am listing what should be done in a table using divs.
The issue I am having is that when I am setting the margin's, the text isn't lining up into columns properly because some text is longer than others, so it results in a jagged table.
e.g.
123 hello coool
123 asdfasdfsadf cool
123 hello coool
123 asdfasdfasdf kkk
So the spacing between each section is correct i.e. 20px, but since the text varies in length it doesn't look aligned.
what's the issue here? is there a solution to this
(I know a table would make it easier, but I want to learn the div way)
How are you getting your divs to line up next to each other -- that is, simulate rows? If you are using floats, e.g. float: left, then the effect you're experiencing is commonly known as shrink-wrapping. In a shrink-wrapped div, the div's width will automatically correspond to the length of the content.
The only pure html/css way around this is explicitly set the width property of your div. You'd need to set each of the divs in a column to the same explicit width. In order for this to be effective, you need to have some idea of the length of your content, and set width at least as wide.
If you want each div in a column to dynamically inherit a width from whichever div ends up having the longest content, you'd have to use javascript.
You're probably not assigning them fixed widths, causing them to just be sized automatically. Tables will automatically make each cell in a column the same width, but it cannot be done using s, you need to set a fixed width.
You could make each column its own div. EG:
<div class="col1">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="col1">
<p>hello</p>
<p>asdfasdfasdf</p>
<p>hello</p>
<p>asdfasdfasdf</p>
</div>
<div class="col1">
<p>cooool</p>
<p>cooool</p>
<p>cooool</p>
<p>cooool</p>
</div>
and do
.col1 {
float: left;
}
but it will only result in pain and suffering.
I don't know why you want to do it this way; perhaps you heard "tables are wrong", but that is incomplete. The whole phrase is "tables are wrong for layout".
Use tables for tabular data, like this.
It's not a table vs divs, it should be a table vs. semantic markup. If you just replace all the table elements with divs you're missing the entire point of the whole thing.
Also in your example you would use a table.