I have a list of div displayed on the same line. When the page is not wide enough to display all the div on the same line, I don't want extra div to be displayed on the next line. How can I avoid displaying extra div on a new line?
Here is a jsFiddle: http://jsfiddle.net/YCFZM/
Try to reduce width on the page and you'll see some div displayed on a new line.
Thanks.
Updated gist with solution: http://jsfiddle.net/Meligy/YCFZM/16/
Main changes:
Removed extra quote in HTML at id=""sidebar" which was breaking the gist
Removed height: 0px; from div#sidebar CSS
Added white-space:nowrap; to div#sidebar CSS
Removed float:left from div.sidebar-item CSS
Added white-space: nowrap; display:inline-block; to div.sidebar-item CSS
Optionally you can also remove text-align:center; from div#sidebar CSS if you meant to make the text be to the left.
In the style sheet use the display attribute with the inline value on the doc
As far as my knowledge goes the only solution to this is to have a fixed width for the container. Or to have an element in the container which has a fixed width
You need to set a min-width which is large enough to encompass the divs. Also, you had an extra quotation mark in your jsfiddle which was preventing your styling from being applied and for some reason the height property was set to 0. I've adapted your jsfiddle here to display the behaviour I think your after.
Related
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
I am using table-cell arrangement of div blocks in my code. There is a problem in my code.
Preview of how my html looks is here
When I have any content (text or image) in my first panel then the .inner div of the second and third panel have a top margin of some 10-15 pixels. Why is that ?
Can any one look and let me know what I am missing.
add vertical-align:top; in #wrapper > div
See Demo: http://jsbin.com/avozik/14/edit
I have a similar case, and vertical-align:top; solves the issue. However I want to elaborate reason behind this:
https://jsfiddle.net/46tyc48y/1/
Because table cells uses vertical-align:baseline; by default, the right cell text will align to the baseline(bottom) of the image, creating the phantom spacing on the top. So we need to explicitly set vertical-align to bypass this behavior.
I have a table that is being populated with different lengths of text. I have set the table-layout css property to fixed because it keeps pushing the table outside it's parent creating a horizontal scrollbar.
I want my td's to be exactly half of the table which will be full size of it's parent. I want my text to wrap inside the td's. Here is what it looks like:
I want the text to wrap around 20 so it doesn't overlap the other text. I can't use a <br />.
Here is a JSFiddle of the problem.
You could use word-wrap: break-word on the p. It worked in your jsFiddle, and it's compatible with IE as Microsoft developed it.
The reason that it is not breaking is because there is no spaces in the string. As soon as you add a space to the set of numbers it breaks. Therefore, one way to fix that would be to assign word-wrap:break-work to the p selector.
as you are setting container width smaller, try to increase container width, Check JSFiddle for demo, width 250 will break to the exact 20 position.
#container
{
width: 250px;
}
p
{
word-wrap: break-word
}