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.
Related
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
I have a two-column layout, composed of fixed-width floated divs. Inside the first column is an extra wide element. So the html layout looks something like this:
<div id="container">
<div id="column1">
...short content...
<div id="extra-wide">
...wide content...
</div>
</div>
<div id="column2">
...long content...
</div>
</div>
As annotated, the first column contains a short amount of content and the second column contains a long amount of content. The CSS looks something like this:
#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }
So the extra-wide element is actually wider than its parent, column1. And I don't know the heights of any of the elements ahead of time -- they are all variable.
The issue here is that column2 appears overlapped over the extra-wide element in column1. Here's a jsfiddle to help visualize this: http://jsfiddle.net/e3KNg/ (This fiddle has some content inserted and colors added to make what's happening more clear). Here's a screenshot:
Without altering the basic HTML structure or the widths of the three elements, is it possible (without the aid of Javascript) to force the extra-wide element in column1 to appear below column2? Here is the effect I'm trying to achieve:
I know this can be done by rearranging html elements or by using Javascript, but I'm looking for a solution within the above constraints. I tried using clearing divs in various places, removing or adjusting floats, and trying some overflow settings, but could not achieve the effect I was looking for.
looking at it, without set heights on the content elements or using javascript to work their heights out or set positioning on the extra-wide element, what you are looking for can't be achieved.
Heres a fiddle which works using an absolute positioning of the extra wide element and a top value, as well as using some clever css to make the columns the same height.
http://jsfiddle.net/yKRu4/1/
As i siad this works, but i honestly feel what you are looking for can't be achieved with the restrictions you have put in place.
I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top:
The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <div> inside the parent one and styled it appropriately with padding: 10px and a white background.
The problem comes when I try to re-use the grid inside an 'inner' <div> like this. for example, inside that white box, I want the link list to be inside a 5 column container, and the image in a 3 column container (sorry, the screenshot doesn't show it at this size).
I tried redefining my grid column sizes inside the .inner class, which partly works - I removed 10 pixels from each column size, since the total width needs to be 20px less than before to account for the margins. This works in the case where there are exactly two child <div>s inside the .inner container, but obviously if there are more or less than 2 then things start to look wrong.
Does anybody have a good strategy for dealing with this kind of thing? I'd be willing to just put the padding on all columns, regardless of background colour, but couldn't get this working like I wanted when hacking the grid.
thanks
Matt
the 960gs has an .alpha and .omega class for allowing nesting. Usually this removes the leading 10px and trailing 10px margin from the elements you apply it to. You might be able to reverse these and misuse them to give you the padding you need - the overall column widths would add up, but the padding would be on the "wrong" side
<div class="container_12">
<div class="grid_12">
<div class="grid_5 omega">...</div>
<div class="grid_3 alpha">...</div>
</div>
</div>
I haven't tested this though so not sure that it would work
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)
I have a fluid page (100% width) with this inside:
[image-fixed-width] | [text-fluid-width -----------------------------------]
| -----------------------------------------------------
| -----------------------------------------------------
I need the text next to the image not to wrap around it, but to display next to it (like in the illustration), like another column. At the same time, the text needs to span across the entire page width.
This would be easy to by setting a margin-left to the text, but the problem is that I don't know the exact width of the image. The image size can vary...
Is there any solution for this?
Try adding overflow: hidden; to your content div. That should force it to stick to your columns.
http://jsfiddle.net/BG7FA/
Edit This will not work in IE6 (go figure)
Combine float: left on both elements with display: block on text.
The easier way to do this is to create a table with 2 cells, one for the image and one for the text. You won't use css but it works with any browser.
This is a guess, but I would expect it to work.
<div style='width:100%; overflow:hidden'>
<img style='float:left'/>
<div style='float:left'>my text</div>
</div>
The logic is that a div (even a floating div) should expand to fill the available space, and the parent will not stretch or allow overflow as both parameters are set.