I'm new in CSS. I don't understand if a display: absolute; element for instance a , is still consider child of its parent or not (for its out of the flow)?
For example:
**HTML**
<div class="container">
<div class="my_div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In sit amet nibh et arcu gravida tincidunt. Nam dignissim elit
vitae erat porta, at efficitur lacus consequat. Sed molestie,
mi a efficitur elementum, lacus metus hendrerit libero, posuere
ultricies urna libero nec quam.
</div>
</div>
**CSS**
.container div {
width: 50%;
}
.my_div {
position: absolute;
}
without the position: absolute; my_div width is equal to the 50% width of the container . But after the setting position: absolute; I don't understand what actually happen to the my_div width, is still referring to the CSS .container div{} rule or not?
The "parent-child relationship" doesn't really change (so technically it'll still be a child thereof, which you can see reflected in the DOM), but the "(document) flow" does indeed change.
Once you use position: absolute; the element is removed from the normal document flow, which does affect the effect many properties have (as you've likely noticed).
Since you mentioned being new to CSS, i should make sure you're aware that 90%
of the time, when online tutorials (or books) suggest using properties such as position and float, they are likely to be leading you down an outdated and/or misguided path.
Nowadays we have things like flexbox (display: flex) and grid (display: grid) which make the vast majority of layout challenges (which used to be a pain to understand/create) totally simple.
It is still a child of the parent, but it is also outside the flow. Giving the parent position: relative; will allow certain properties on the child (like top, etc) to still act relative to the parent. Usually absolutely positioned elements require explicit height and width declarations, but it depends on what you are trying to do...
Related
I'm making a 'news page'-like webpage, and it works perfectly on a 16:9 display, but it struggles with smaller width tabs.
There are 3 solutions I want to test.
Making the margin that holds the div away from the left side of the tab exponentially decrease in width
Make the margin disappear under a certain width
Stop using margins, find another way to keep the div away from the side of the tab and make that disappear under a certain width of the tab.
I don't know if any of these work, but I've seen pages doing this, and I want this feature on my page.
Sadly, I have not found anything like this on the internet and just got bored. I have not tried anything because of my lack of knowledge about solving this problem.
To demonstrate the issue, my code:(HTML with inline css)
<html>
<body>
<div style= "width:60%; margin-left:20%;">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>
As you can see, if the page is scaled down to a small (around 1000px) width, the 40 % empty space is just too much, so I want to find a way to get rid of that margin and set the width to 100%. I do not want to stick to using margins, so if there is a way to use something else, I'd be really happy.
Things I've tried N°1:
<html>
<body>
<div style= "width:60%; margin: 0 auto; min-width:500px">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>
By horizontally centering the div and adding a minimal width I've
Removed margins
Made the empty parts disappear under a certain width
But this method still isn't the one I want to use, because if the page is smaller than the value given, you have to scroll sideways to read.
I got help for many people on this site and on other platforms, and solved the problem with flexbox. Thanks for your help.
i think you need to read on flex-box
div {
display: flex;
flex-flow: flex-start;
width: 100%;
}
div p {
flex: 1;
}
if this is not what you meant i think you should reframe the question
I've read a few solutions with similar titles but none with a solution to this layout.
I have 3 content blocks which all stack beneath each other at most screen widths.
However, when content become overly wide, I want to display a slightly different format.
I want to display the media to the right and the title and text to the left with the text directly beneath the title. It currently sits below the media block (as per the snippet).
anyone know how I can fix it?
.content {
overflow:hidden;
}
.chart {
height: 200px;
width: 200px;
background-color: red;
}
.title, .text {
float:left;
}
.media {
float:right;
}
<div class="content">
<h3 class="title">This is a reasonably long title</h3>
<div class="media">
<div class="chart"></div>
</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non urna est. Quisque sed dolor ac ex aliquet aliquet. Integer ornare, velit vitae iaculis faucibus, nulla libero molestie sem, eget placerat augue massa vitae justo.</p>
</div>
There are 2 things you need to do:
1) You need to add a width for your text block, cause now it's 100% and it takes 100% of parent block width - so no floating will be.
2) You need to add to text block a clear property with left value - cause you don't need it to be floated by the headerfrom the left side.
It's all you need to solve the issue:
.text {
clear: left;
width: 50%; /* put your own width (no matter percents or pixels), but it must be less than (parent block width - media width)*/
}
Check here the example: https://codepen.io/fox_hover/pen/8f838b7799db7a3ed4f4d742097440ef
While both previous answers do work to some degree, both fail to fully address the initial question.
The first, requires a change in the order of elements and the second applying a fixed width which was restrictive.
The final solution is in 2 parts so that it works with multiple screen sizes and media queries.
Firstly I changed the order of the elements as per answer 1. This enabled me to achieve the layout required for my 8 column (wide layout). I applied this styling using an 8 column only media query.
For all other screen sizes, I use display flexbox, which allows me to restore the order I require.
CSS. Never my strong point!
Consider the following styling:
.popupComponentContent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 16px;
max-height:100vh;
max-width:100vw;
box-sizing:border-box;
background-color:white;
box-shadow: 2px 2px 5px 4px rgba(0,0,0,0.5);
overflow:auto;
}
noting that there are no specific rules for the width or the height of the targeted element.
Let's apply this styling to the following markup:
<div class="popupComponentContent" >
<p>
This is a popup!
</p>
</div>
And the outer div fits nicely around the content. See example on codepen right here.
Now, instead, let's apply it to this markup:
<div class="popupComponentContent" >
<p>
This is a popup!
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida eget
dolor a interdum. Donec placerat turpis ac lacinia rhoncus. Cras urna magna,
imperdiet ut imperdiet ultrices, euismod non elit. Proin vel metus pretium,
bibendum tortor vel, congue quam. Sed ultrices lacus quam, nec porttitor
mi scelerisque eget. Praesent accumsan varius leo nec tincidunt. Maecenas
viverra ultricies purus quis rutrum.</p>
</div>
...ensuring that we have enough content to cover the width of the viewport. See example on codepen right here.
Why is the div in the second example half the width of the screen? What makes that happen? Why doesn't it extend to the full width of the screen?
You've applied .popupComponentContent to a div which is a block element. It covers 100% of the screen (parent element) unless a width is specified.
In .popupComponentContent, you use left: 50%. This doesn't actually position the element at where it supposed to be since the element is a block with no width specified. It basically shrinks the div. Right side of the div is snapped to right. left: 50% just moves the left side of the div to 50%, so you get 50% width for your div.
If you want to move your div to left: 50% while preserving its default width (which is 100%), you should apply display:table on the div.
So I'd say display:block on the div defines the width.
You can remove the transform attribute to understand it. If you do that you'll see the width of the element fits with the remaining space between left: 50% and the right side.
So you can play with this left attribute to adjust the maximum width for your popup (as well as adjusting the transform to keep it centered).
Take a look on flexbox, it can help you to improve this.
Removing the transform line and the left line will make it display full width.
As it is, it covers only 50 percent because left: 50%; bumps the left margin halfway across the window, then transform: translate(-50%, -50%); bumps the whole element back across the window the other way.
I have an issue with float and have included the sample code below. I am trying to create a two column layout: I know how to do this a number of other ways so this question is with a view to finding out why FLOAT behaves the way it does here.
The container DIV has two DIVs, both are floated left.
As expected, the size of the browser window determines whether or not the second floated block level element will go alongside or under the first floated element.
The problem arises with the length of the content in the second floated DIV (assume the browser window is maximized, at whatever resolution).
In the code below, I have commented out part of the second paragraph. On my browser this is the cut off mark: including any content after this causes the whole DIV to clear the first DIV, even though there is a lot of space left in the second DIV before it should need to clear the first DIV.
I cannot see anything in the code that should cause this to happen. I am aware of how float behaves in terms of block level and inline content and the consequences of placing non-floated blocks beside floated ones, but I cannot find anything in the documentation to explain why the block should clear when there seems to be sufficient room for its content.
Help much appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Float Problem</title>
<style>
body {
background:#5c604e;
}
#container {
position:relative;
background:yellow;
}
p {
background-color:#cccccc;
width:50%;
}
.block {
width: 200px;
height: 200px;
}
.float {
float: left;
}
.pink {
background: #ee3e64;
}
.blue {
background: #44accf;
}
</style>
</head>
<body>
<div id="container">
<div class="block pink float">Lorem ipsum dolor sit amet consectetuer Nam fringilla Vestibulum massa nisl. Nulla adipiscing ut urna ipsum Curabitur urna lacinia pretium feugiat Ut.
</div>
<div class="blue float"> <h2>Test Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum erat a neque eleifend vitae ultrices nisi tempor. Praesent facilisis lobortis nisl, <!--sit amet gravida orci mollis vitae. Maecenas porta turpis id urna porta id ornare velit dapibus. <!-- Proin sollicitudin, tortor viverra posuere mattis, nisl est rhoncus urna, nec elementum augue turpis vitae diam. Pellentesque ut quam sit amet elit tempus suscipit nec vel nulla. Proin ullamcorper sollicitudin metus in posuere. Aliquam a vehicula odio. Morbi scelerisque arcu ac nibh cursus ullamcorper. Aliquam pulvinar commodo nunc nec laoreet. -->
</p>
</div>
</div><!--end of container div -->
</body>
</html>
See it at http://cssdesk.com/86cPH
In your example, you have two block-level element floated next to each-other. Because they're block-level, they establish a new containing context in which their contents will live and affect layout.
The standard behaviour when calculating box sizes for floated elements is to base it on the contents of the element. Because your second floated box doesn't have an explicit width, the browser determines that its width should be based on its contents, which in the case of the floated element is going to be as wide as its contents can feasibly be.
Thus, the second box flows underneath the first because the intrinsic width of the paragraph affects the blue box, which is larger than the allotted explicit constraints of its container (i.e., the width of #container minus the width of the first floated element).
If you wanted the text to flow around the floated element, you should omit the "blue" box. Only when the float and the contents are nested in the same container (and the content isn't a block-level element) will the content then flow around the pink box as one might expect.
As far as getting a working two-column layout with equal-height columns, I'd recommend trying display: table if you don't need to support IE7.
What you want to achieve? you haven't fixed the width of second block and so its width is going mad with the content length.
Give it a fixed width.
If you want that rest width is covered by it then try this.
.block1 {
width:20%;
}
.block2 {
width:80%;
}
and in html
<div class="block1 pink float"> ..content.. </div><
div class="block2 blue float"> ..whatever content.. </div>
remember there should be no space between closing div of left block and opening div of right block else whitespace between them will cause them to stacked over one another
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
When I specify overflow-x: hidden on an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding overflow-y: visible and even just overflow: visible, to no effect.
Am I misunderstanding what these properties do? I would think that overflow-x should not affect the vertical overflow at all.
This has happened on every browser I've tried.
Here's a snippet which demonstrates the effect. I'm using <pre> tags because they're an easy way to create overflowing content, but it seems to happen with any tag.
pre {
height: 40px;
width: 150px;
margin-bottom: 50px; /* We need this so they don't overlap. */
}
#x-hidden {
overflow-x: hidden;
}
#y-visible {
overflow-x: hidden;
overflow-y: visible;
}
#visible {
overflow: visible;
overflow-x: hidden;
}
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="x-hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="y-visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
The W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
But this makes no mention of the case when overflow-x or overflow-y is set to hidden, which to me implies that this combination is indeed meant to be possible.
Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023
It explains why
el {
overflow-x: hidden;
overflow-y: visible;
}
renders as
el {
overflow-x: hidden;
overflow-y: auto;
}
which usually renders the same as
el {
overflow-x: hidden;
overflow-y: scroll;
}
because the auto value of overflow-y is scroll in most browsers.
So, in order to achieve this effect, we can't use the overflow-x/overflow-y properties. I've experimented with the clip property as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/
Try setting your height. Either make it like 100%, or auto
check this
jsfiddle
height: auto;
Just an hour ago I had the similar problem except the problem occurred when I had specified overflow's value as auto. I didn't use overflow-x or overflow-y, I just needed it to fully contain my two lists that were floating on opposite ends.
What worked for me was that I changed overflow's value to hidden. Try that. I had set the max-width to 100% and instead of specifying height, I just used overflow: hidden.
Hope that helps.
Give this a try:
height: auto;
width: 100px;
overflow: hidden;
Should keep the element at 100px wide, and allow it to expand vertically based on its content (without scrollbars).
Firstly, this fiddle shows the problem which you describe.
As yet, I don't know how to get around this, but it seems like the spec hints to this here:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
Just use overflow: hidden on a wrapper div with size constraints. Excuse my formatting in a bit of a rush today.
<!DOCTYPE html>
<html>
<head>
<style>
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>
<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>
See it in action here: http://jsfiddle.net/4PZC9/
Try setting the display property? The overflow declaration works on block level elements!
Maybe you misunderstood something, I didn't unsdertood the question... or the problem is not in the overflow settings.
Overflow: auto will add the scrollbar only if needed (content bigger than container).
Òverflow: visible will add the scrollbar.
Òverflow: hidden will NOT add the scrollbar.
I understand that you want the x-content to be hidden, so overflow-x: hidden, but from your question it seems to me that don't want the vertical scrollbar to see the vertically overflowed content.
Maybe the problem is that is set a fixed height (or max-height) for the container and the content is bigger. Remove the height (or max height) and you'll avoid the vertical scrollbar.
...or as maybe I said, just didn't understood what is the desired effect.
Try this,
height: auto;
overflow:hidden;
Cheers.
Reading you question... I don't see any problem...
Whe I specify overflow-x:hidden; on an element, it adds a vertical scroll bar.
If it overflows in it's height (as you just said it does), then that's quite normal.
I have tried adding overflow-y:visible; and even just overflow:visible, to no effect.
Well... That's normal, as you're telling it to show a vertical scrollbar, wich there already is.
As kuloir said: X = horizontal; Y = vertical.