Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm looking for a way to give a div a background with a fixed width.
In particular I want the div to have a 5 pixel one-colored background (no percentages, no gradient) and the rest of the div being transparent. In this case I don't want to use a border!
enter link description hereYou can use a pseudo-element and then style that. Make it 5px wide and 100% height of the div to make sure it covers the whole lot.
See this fiddle.
.bg {
height: 100px;
}
.bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 5px;
background-color: blue;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On this template: GYM
If I add add more text under the welcome title, the form is lowered down and then disappears (class .home has overflow: hidden).
If I make it visible then will be over the section under it. What I want is the div's height to be modified depending on the text that I add, to show all the content and then start the other section (w/o a scroll for the div -> overflow: scroll)
Thanks!
Make the form position:relative; and the carousel position:absolute; (with extra positioning).
This will make sure the height will adjust, but still allow the carousel to flow in the background.
Edit (this is what I used):
.home form {
background-color: rgba(0,0,0,0.3);
height: 100%;
padding-top: 150px;
position: relative;
width: 100%;
z-index: 90;
}
.carousel {
position: absolute;
top: 90px;
left: 0;
width: 100%;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to stretch full height of a div using CSS?
I'm trying to stretch a div 100%. Applied min-height: 100%; but no result.
<div class="mydiv"></div>
.mydiv {
min-height: 100%;
}
In your css, try add this, it work for me :)
.divName{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background:red;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have researched a bit and saw many examples about how developers use this technique to full screen a container and the most used are:
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
and
html, body{
height: 100%;
margin: 0;
}
.container {
min-height: 100%;
margin: 0;
}
These are the most used methods to extend a div in full screen when the container is the child of body.
If you ask me, the method using absolute position is not a very good idea because if you put other elements inside you can not relate to it because they have an absolute position.
The method using HTML and body 100% seems to be a little bit rudimentary.
So, what is the best way to extend a container?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am just wondering if there is any solution for a scrollable area (ie overflow: scroll) with the scrollbar hidden? I didn't find a solution while googling it so i ask here. It would be cool if this is possible with CSS. But if there is a solution with JS or php I'd still like to know.
By absolute positioning a container in an outer container that is relative positioned with hidden overflow you can hide the scrollbar of the inner container outside of the first.
So the scrollbar is still there, but you won't be able to see it.
#outer {
position: relative;
width: 200px;
height: 300px;
padding: 0;
margin: 0;
overflow: hidden;
}
#inner {
position: absolute;
left: 0;
top: 0;
right: -30px;
bottom: 0;
padding-right: 15px;
overflow-y: scroll;
}
JSFiddle:
http://jsfiddle.net/g6URf/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
im already finished with the site but i got a lil problem.
i would like to put three hover boxes on the top of the icon box and text as u can see on this pic.
the problem is that if i do a new div box its on top of the #webicons box .
would be nice if ya could !
Here is the actual status. http://www.awesom-media.de/umgebung/index.html
jsfiddle.net/D6V6R/
This solution work's though I dont think your lis in the #referenzbox are the correct dimensions as currently they are too big for all to fit on one line.
Currently the container has a width of 1200px and the three lis at 400px plus padding are to wide for this.
If you white-space: nowrap; on #referenzbox ul you can see this issue.
Personally, I would close #block-container just before #referenzbox and set width: 100%; on this #referenzbox.
You can adjust the sizes to fit your needs.
#referenzbox {
height: 400px;
background-color: red;
clear: both;
width: 100%;
}
.webdesignbox {
max-width: 520px;
float: left;
min-height: 545px;
margin-bottom: 30px;
}
In short, as you floated the icons, you needed to clear them on the next div with clear: both;