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">
Related
I have a problem that div doesn't fit content when it contain long words. It just take max-width.
Screenshot:
http://img687.imageshack.us/img687/3253/photondf.png
I want div to take same width as content without javaScript.
HTML
<div class="div">
<p>fkjdajfkdjfkdjfkdfjkdfjkdfjdfdjkfkjfdkdfioiewtiovvuiocuvicxvocxvuiocxvucioxbuvbhxjk
civuiozxviopucvicvuvjcizoxvopcxvpiovxzijpvxzicovpzvjijopcvzxpvjiocvpjzvicvzpjvci.</p>
<div>
CSS
.div {
float: left;
background:red;
max-width: 900px;
}
What exactly trying to get the div to do? Did you want it to scale down to the size of the content but be no bigger than 900px?
Try width: auto; but keep max-width if you don't want your div to be larger than 900px.
Well well, there are couple of problems here.
The content in p doesn't have any space at all. In other word, it won't be able to "split" the word on multiple rows. And your div does actually have the correct width.
Unless you really don't want to split it over multiple lines. You can define overflow on the div to either auto or hidden. In this case, auto will add scrollbars and hidden will simply hide the content that goes over.
If overflow on either the p or the div, You can actually force word-wrapping in css3: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Since you defined a width for the div, it really always used that width and never more. (Don't count the overflowing text as bigger than the div). The overflowing text shouldn't be taken into account when calculating layout size and position of other div around this one.
Btw, a really long string like that isn't really a good "use case" if you have problem when there are actually spaces. You should paste it here instead of that.
edit
Your div can't "fit" the content with long words, it will spread to the maximum width possible and then when the maximum width is reached, it will wrap to an other line. If the word is bigger than the div it will overflow.
edit 2
If you really want to do that, there is a way. But this is quite ugly. You'll have to add a <br /> after each long words. If you're passing the text within a template engine, you can even make the <br /> replace your spaces with css. But to be honest, just don't do that.
This fiddle demonstrates the problem.
I'm trying to align an image and a button to the right, on two separate lines, as a joint unit. I created a wrapper div ("right-stuff"), with position:relative, so I can use position:absolute on its child, the button.
The problem is I don't know of a good way to align the button to the right without hurting the height calculations.
What I did is give it position:absolute and right:0, but this removes it from the flow, and causes the container ("right-stuff") not to include it - see how the red background doesn't reach it, although it "should".
Another problem is that the next item in the flow after "right-stuff" will need a margin-top to be in the correct position, or otherwise I have to either give "right-stuff" a width I calculate myself, or an artifical margin (that takes into account the button height). Too much knowledge here.
Is there a better way to get both items to act as a coherent unit, that is "right aligned", but without taking things out of the flow?
Obviously this is not the first time someone has asked this question, but I haven't found an answer here that addresses these specific concerns without ugly hacks (like manually adding a margin-bottom equal to the button's height).
Edit: text-align is a decent solution (better than what I thought of anyway). One caveat: It assumes the button is indeed textual, and doesn't work on the image itself. This is ok in my example because the image is the widest thing in the container - but what if I had another element in the container that was wider than the image? How would I keep the image aligned to the right?
Yes, since both of those elements (img and button) are inline-block you can simply use text-align: right.
What's wrong with text-align right?
<div id="nContainer">
<div id="nRight-stuff">
<div id="nRight-img">
<img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" />
</div>
<button id="nRight-btn">A right aligned button</button>
</div>
<br style="clear: both" />
</div>
#nRight-stuff {
float: right;
text-align: right;
}
Fiddle
check out the editted fiddle at http://jsfiddle.net/HXH5Z/4/
basically i've just brought the button back in the flow, but enclosed it in a div, aligning the content (text-align) to the right. The same could be achieved by just adding the text-align: right rule to the #right-stuff div, but i don't know if you also want the image to be aligned to the right inside that div...
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 am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
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.