I have some HTML that looks like the following: http://jsfiddle.net/KbqHa/
I would like this div to be on the same line as the image. However, it moves to the line below due to the div being a block element. In this case I'd usually use a <span>, but this completely messes up the border (and the div wraps under the image too). Adding display:inline-block to the div doesn't seem to work either. I've tried using float: left but I can't get that to work either. Any thoughts?
The classic solution is to use float: left on the img, and then add a margin-left to the div equal to the width of the image.
See: http://jsfiddle.net/thirtydot/KbqHa/2/
However, that's no good if the width of the image is unknown.
So, a better solution is to use overflow: hidden on the div.
See: http://jsfiddle.net/thirtydot/KbqHa/3/
The reason this seemingly nonsensical solution works is explained here.
Related
I'm very new to html and I was wondering if there is anything I can use other than a div element. The code that I want to use displays a hover. For example: <div id="cartpopup">.
Well this makes it so whatever I put in between these tags gets lowered. Everything is working fine I just don't want my image to be lowered because of div. Help would be appreciated.
To prevent line wrapping, try using a span element, which is inline.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You could also set a div to display inline or inline-block (which allows CSS sizing, for example) using CSS:
#cartpopup {display: inline-block;}
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
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.
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.
I have a slight problem with a background image on a block element that is preceded by a floating element.
I float an image to the left, followed by a H1. As expected, the H1 (which is a blocl-level element) flows behind the image, but it's contents (the actual title) appear to the right of the image.
Unfortunately, the background-image I'm using on the H1 has to be aligned to the left, and thus appears behind the actual img, because unlike the contents this is not pushed by the floating behaviour.
Example:
http://jsfiddle.net/WwuqG/
(I set the second title to clear: left to show what it should look like).
One solution is to set the left-margin of the title to a little more than the floating image's width, but that would require me to know it's width beforehand.
Another option is adding the title's icon in an element inside the h1, but that's not semantically correct.
Is there a better css-only solution that doesn't require additional elements?
add overflow:hidden to the h1
new fiddle
I'm slightly confused.
If I do what you suggested:
set the left-margin of the title to a
little more than the floating image's
width
It looks like this: http://jsfiddle.net/WwuqG/1/
My confusion comes from the fact that your problem seems to be.. really simple to fix.
Also add float: left to the <h1>: http://jsfiddle.net/WwuqG/2/
This works with whatever width image: http://jsfiddle.net/WwuqG/3/
Is that it, or have I misunderstood?