I am quite fresh to LESS. I am not sure where to look in the documentation for this or if it is possible.
I have container one, which has height:auto. it is a content container that will grow.
Can I have a second container that would be like - container2:height = container1:height.
So that the second container will become the same size as the container with height:auto.
This can be done with javascript of course but I am curious is this is something that can be done with LESS.
P.S.:If anyone wants to plug any good LESS tutorials/reading material, I would be happy to see it.
This is not a question about less then more a question about css.
To make a inner divelement to fit the same height form the outer element without knowing (or given height) you can do something like this:
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
margin: 0 auto;
width: 300px;
height: 300px;
position: relative;
}
.inner{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
So you can be shure that the inner DIV has always the exact same sizes like the outer DIV
UPDATE:
When the DIV elements should not overlap each other you can do something like this:
.inner{
position: absolute;
top: 100%;
bottom: -100%;
left: 0;
right: 0;
}
Now the second DIV has exact the same hight and is placed under the first one :)
#height: 100px;
#container1{
height: #height;
}
#container2{
height: #height;
}
#height: 100px; I defined a variable with name is height and value is 100px and I use it in the css underneath
Related
Here what I have when I use this css code :
.circleImage {
position: absolute;
width: 40%;
left: 300px;
top: 570px;
}
And the result that I wish is here :
I try fixed and sticky in postion type, i dont exceed my screen but fixed or sticky does not correspond with my result
Thanks for the people who take time to help me
Just use responsive units to position the image.
.circleImage {
position: absolute;
width: 40%;
left: 30%;
top: 30vh;
}
<img class="circleImage" src="https://www.pikpng.com/pngl/b/390-3904056_round-profile-round-profile-clipart.png">
You're using fixed value like 300px which pushed the image outside the parent because the parent width is not that much wider. So use % like the answer above.
If you want to center it:
You can use this method to center any child with sticky/fixed/absolute container. Set the left and right value to 0. Then add margin-left and margin-right to auto. This will center the child regardless the parent width.
.circleImage {
position: absolute;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRn0sYfGooUSN-KGwa4xg2JbzdSB_wCC6_aA&usqp=CAU" class="circleImage">
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I'm reviewing some code and while it works, I do not understand how the CSS below is centering the inner div.
Codepen demo available too.
HTML
<div class='outer'>
<div class='inner'></div>
</div>
CSS
div {
border: 1px solid black;
box-sizing: border-box;
}
.outer {
position: absolute;
background-color: goldenrod;
width: 100%;
height: 100%;
}
.outer .inner {
width: 75%;
height: 75%;
background-color: green;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
Here is the answer for you question.
The margin: auto just tells the browser to split up the available space evenly between the left and right side of the element. By available space, any unoccupied horizontal space between the left and right edges of the parent container.
Reference
it is just because of
margin: auto;
You can get better understanding of this from Box Model.
For some reason a colleague at work doesn't want the sweet SO points so here is his answer.
If you were to put
top: 0;
bottom: 0;
left: 0;
right: 0;
on a normal div without height or width it would make the div the entire size of its container. Putting height and width on that div would constrain it and while it would try to fill its container, it would respect the set dimensions.
Setting margin: auto; as mentioned is the key. This allows the box for this div to fill its container by expanding the margins equally while respecting its set dimensions.
Is this the best way to center things? No idea but it works.
I have a little problem with a nested div to be overlayed by its parent div, searched here already but no solution will fit for my problem.
Sample CSS:
#content {
position: relative;
top: 80px;
min-height: 530px;
width: 1000px;
z-index: 2;
}
#category {
position: absolute;
top: -30px;
right: 0;
z-index: 1;
}
Sample HTML:
<div id="content">
<div id="category"></div>
</div>
What it should look like:
The nested div #category should stick to the top right of the #content and should be behind it, so that the #content will overlay it.
I know that it's maybe not the best way to handle it but I need to do it that way, due to the crappy style of the whole project (I'm just adjusting it a bit).
Thanks in advance!
In order to put child element behind it's parent, you have to use negative values for z-index:
#category {
position: relative;
z-index: -1;
}
Live demo: jsFiddle