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.
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 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.
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 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'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.