This is my code http://jsfiddle.net/noppanit/8D7QN/
As you can already see that the text overflows out of the container, I tried putting overflow:hidden into the text already but it didn't work. I understand that because it's absolute position, so technically it's out of the container. But I'm not sure how to fix this. The text has to be on top of the image that's why I make it absolute position.
If you guys could shed some light to me, that's be awesome. I'm very new at CSS.
You need to set a height on the .text_content (example) or, preferably, set overflow:hidden; on .text_image (example).
You assume that it is overflowing out of the container. It is not. The container has a background that is not repeated and is smaller than the container. The container has no height css and thus sizes to the content.
I would do something like this:
http://jsfiddle.net/8D7QN/7/
Related
I am making a header component and what I want to achieve is to make my header picture stretch to the full width of the webpage, even when it the browser shrinks, however when you shrink the browser the picture does not stretch 100% and is driving me insane. I don't want to remove the scroll-x property, so how can I fix this? What am I doing wrong? Here is is a picture of my issue:
https://imgur.com/YCZOYGE
And here is a codepen with my code:
https://jsfiddle.net/philipkovachev9/ax2Ljtvn/5/
So, as promised I found a solution.
Change display:flex from your parent div, to display: inline-block and remove width:100%. You div will have the size of your content, even when it overflows.
Setting the width to 100% will be relative to the parent, it was the body. However, the body didn't include the overflow.
I hope it works :)
PS: If you still need display:flex, create a child div, with flex attribute.
add this css
body{padding:0;margin:0}
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
Hi, I am trying to position two images next to each other and have one of them overlap the other one in a corner.
I have tried using the z-index property but this does not work unless i set the position property to something like fixed or absolute and this messes up the layout of my site.
I was wondering that although i have an image container with the width and height set, can i possibly cut out a section of the container like a rectangle to let the image sit inside the cut like the image below me.
Is this possible?
Thanks!
position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:
http://jsfiddle.net/GtJMF/
position: relative;
I can't see how having a position:absolute for this scenario would mess up your site.
Put position:relative on your "Image Container". Put position:absolute; right:0, bottom:0; on your "Cut out part" (assuming it is also in the Image Container). This will give you the exact effect you are looking for.
Positioning is relative to the containing positioned parent. Just a position:relative is enough make an element a "positioning master" that all interior positioning will use for its coordinate system.
position:relative also "enables" z-index, but unlike absolute and fixed it doesn't mess up any of the rest of the layout.
I have a div that shows some text and is absolutely positioned on a page. While it is absolutely positioned the div is just large enough to show the text it contains. When I add an inline style to that div to change it to be relatively positioned, the width of the div suddenly expands to take up 100% of the page...
I used the Chrome dev tools to toggle the relative position on/off. Turning it off causes the width to be correct, turning it back on causes the div to expand. It is an inline style so there isn't any CSS class or selector that is changing the width on me.
I experience the same issue in Firefox. Removing position: relative in Firebug causes the width to shrink back down to be just wide enough to fit the text.
If you want relative position DIV take his content width then you can give float, display:inline or display:inline-block to your DIV
could you please post the HTML and CSS, and I could have a look at it..
Meanwhile you might wanna have a look at
Position an HTML element relative to its container using CSS
and see if that could possibly help you?
to change size as content grows/shrinks use something like:
<div style="min-height:30px;max-height:300px;">
Which will mean it'll vary between 30 and 300 px depending on content
or
<div style="min-height:30px;height:auto;">
which will vary between 30px and as big as its container will allow (so forever, essentially)
I am doing some of my first web dev, and had a question about the max-height css property.
Here's my code:
div{
max-height:10px;
}
Whenever I create a new div, everything works fine, but when I add any sort of other element between the div tags, the height of the div increase by around 10 pixels (I'm guessing). Is there any way to override this? I want to have a div with text in it where there is almost no border around the text.
Thanks for any help!
-Matt
Sometimes even the default font-size affect the division height. so try overflow:hidden or font-size:10px.
I think this can solve your problem
You could try adding overflow:hidden; to your css for the div.