I need to set height:100%. Here is my code:
#wrapper{
width: 100%;
height: 100%;
margin: 0 auto;
padding: 50px 10px 0 0 !important;
/*border: 1px solid red;*/
}
#left-side{
border: 1px solid red;
float: left;
background-color: #FFFFFF;
height: 100%;
margin: 0 20px 0 10px;
width: 200px;
}
#right-side{
border: 1px solid green;
}
<body>
<div id="wrapper">
<div id="left-side">
lol
</div>
<div id="right-side">
<!-- squares -->
</div>
</div>
</body>
Where is the problem?
When you work with percentages, it's relative to it's parent.
Your #wrapper has a parent (body) with no defined height.
In your css, add:
html, body { height: 100% }
And now your #wrapper can relate to it's parent. This is because html has the browser window as it's parent, the body html as it's parent and so on.
Demo fiddle
I have edited the CSS a bit.Check if this is what u need
#wrapper{
width: 1000px;
margin: 0 auto;
padding: 50px 10px 0 0 !important;
/*border: 1px solid red;*/
}
#left-side{
position:relative;
border: 1px solid red;
float: left;
background-color: #FFFFFF;
margin: 0 20px 0 10px;
width: 200px;
}
#right-side{
width:600px;
float:right;
border: 1px solid green;
}
If your goal is to simply have equal height columns, the display: table properties work very well for this:
#wrapper{
width: 100%;
height: 100%;
margin: 0 auto;
padding: 50px 10px 0 0 !important;
/*border: 1px solid red;*/
display: table; /* here */
}
#left-side{
border: 1px solid red;
display: table-cell; /* replaces the float */
background-color: #FFFFFF;
height: 100%;
margin: 0 20px 0 10px;
width: 200px;
}
#right-side{
border: 1px solid green;
display: table-cell; /* here */
}
http://jsfiddle.net/VTCxs/
If your goal is to simply prevent the images in #right-side from flowing around #left-side, then you'll need to add a margin or padding equal to the width of #right-side to #left-side.
If the 100% height should mean the full screen, you'll have to set html and body tag to 100%, to be sure that the wrapper is really wrapping the nested containers you'll have to add a float break for the wrapper element.
html,body {
height:100%;
}
#wrapper{
width: 100%;
height: 100%;
margin: 0 auto;
padding: 50px 10px 0 0 !important;
border: 1px solid blue;
}
#wrapper:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Here is a small demo. In moment you'll will always get a scrollbar, bescause your wrapper has a height of 100% plus the padding of 50px top.
Related
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
I know this is probably very simple but I have tried using all position settings, float, and nesting. The top div varies in height due to dynamically created text and I need the div below it to be 20px below the top div. Any help is greatly appreciated.
I know I have the position as absolute but that is just to demonstrate kind of what I'm looking for.
#wrapper {
position:absolute;
width:341px;
height:371px;
z-index:1;
border: solid #777 1px;
}
#topbox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
border: solid #000 1px;
top: 7px;
}
#bottombox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
top: 136px;
border: solid #000 1px;
}
<div id="wrapper">
<div id="topbox">Top text box #1. The text is dynamically created here with a height that will vary. </div>
<div id="bottombox">Bottom text box #2. The text is dynamically created here with a height that will vary and needs to be 20px below the bottom of the top text box.</div>
</div>
Looking at the CSS you have, the problem is you are using absolute positioning. For a task like this you should use relative positioning. Here it is on jsFiddle to show you it in action & here is the CSS I adjusted to achieve that:
#wrapper
{
position: relative;
float: left;
display: inline;
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 7px 0 0 0;
border: solid #000 1px;
}
#bottombox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 20px 0 0 0;
border: solid #000 1px;
}
Here is how it renders in my local browser now:
I also looked over your CSS & combined/consolidated it since I find that repeating code can cause confusion when debugging items like this. Here is how I would code this:
#wrapper, #topbox, #bottombox
{
position: relative;
float: left;
display: inline;
}
#topbox, #bottombox
{
width: 280px;
z-index: 1;
padding: 30px;
border: solid #000 1px;
}
#wrapper
{
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox { margin: 7px 0 0 0; }
#bottombox { margin: 20px 0 0 0; }
To give #topBox a bottom margin you simply have to use:
#topBox {
margin-bottom: 20px;
}
The problem is that since you use position: absolute the elements jumps out of their normal flow and will no longer relate to each other.
I am working on kind of a popup. Its structure is very simple and is as follows:
<div class = "popup">
<div class = "upper">
<img src = "http://www.tapeta-mis-galazki-koala.na-pulpit.com/pokaz_obrazek.php?adres=mis-galazki-koala&rozdzielczosc=128x128" />
</div>
<div class = "description">This is a very interesting description of what you can see above.</div>
</div>
with styles of
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
display: inline-block;
}
.popup .upper img {
display: block;
}
and here is a fiddle with the code applied.
As you can see, the div.popup is positioned as fixed to the body.
What I want to achieve is to make the div.description NOT extend its parent div.popup width when it contains much text, instead it should wrap the text to be multilined and be of width of the div.popup. The div.popup width should be determined by the div.upper width and its content. In other words I mean to have div.description's width AT MOST of the div.upper's width, regardless to its (div.description text content).
EDIT
There's this little difficulty: the image content is not static and may be dynamically changed so the width is not constant.
Is that even possible to achieve that with CSS?
http://jsfiddle.net/de6fr/1/ - a basic example of how to fix
You're basically using popup as a container, which means that if you want to retain its width, that's what you have to work on. I used the max-width property with .popup like this:
.popup {
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
display: table;
width: 1px;
}
.popup > div {
display: table-row;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
}
.popup .upper img {
display: block;
}
Update - Flexible
http://jsfiddle.net/de6fr/4/
The fix for making it flexible is to use a CSS hack, which basically changes the nature of the element to a table
The nature of CSS (cascading style sheets) means that it's pretty hard to get a parent DIV to take the size of a child div without some crazy ideas involved. However, there's nothing preventing a "table" with a really small width doing that, as per this code:
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
display: table;
width: 1px;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
display: table-row;
}
.popup .upper img {
display: block;
}
.popup .description {
display: table-row;
}
You have not defined the width for fixed element so add some width to your fiexed element
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
width: 100%;
}
here is the demo
Add a CSS property to your popup class and Give it a width
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
overflow:scroll;
width:400px;
}
#container {
width: 1000px;
margin: 0 auto;
background-color: #000000;
}
#header {
width: 884px;
height: 113px;
position: relative;
margin: auto;
background-image: url(mybanner.png);
background-repeat: no-repeat;
border-bottom: 5px solid #333;
}
#leftnav{
float: left;
width: 140px;
height: 800px;
background-color: #F8AA3C;
border-right: 1px dashed #694717;
}
#body{
width: 550px;
height: 800px;
background-color: #333;
margin: auto;
padding: 10px 0px 0px 10px;
}
Missing information such as what is your DOM structure and what the element that trying to put left to some container, I saw you used float:left style so my guess it is some block element, in that case I can only suggest adding position: relative style to your leftnav element.
With this css
.addProblemClass{
width:300px;
height:300px;
/*width:25%;
height:40%;*/
border:solid 1px #000000;
margin: 5px;
background-color:#FFFFFF;
padding:5px;
opacity:0.9;/*For chrome and mozilla*/
filter:alpha(opacity=90);/*For IE*/
}
.boxHeader{
border: solid 1px #000000;
height: 20%;
padding: 5px;
}
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
height: 100%;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
float: left;
width: 20%;
height: 100%;
}
and this html
<div class="addProblemClass">
<div class="boxHeader">
<div class="addProblemHeaderImageDiv"></div>//DIV A
<div class="addProblemHeaderTextDiv"></div>//DIV B
</div>
</div>
why DIV A and DIV B are overllaping?
Use
float: left;
to addProblemHeaderTextDiv class
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
float: left;
height: 100%;
}
Edit
Why it is shown in two rows?
Since you are specifying the width as 20% and 80% they will fill up the entire space. You are also setting the border, so it won't fit in the 100% space. You can either reduce the width of any div or remove the border.
You cant do this because of the CSS Box model.. it adds the 1px border like this
20% + 80% = 100% width + 1px border
This could work, by subtracting the border again with margin. Else you must use more markup i am afraid.
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
margin: 0 -1px;
height: 100%;
float: left;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
margin: 0 -1px;
float: left;
width: 20%;
height: 100%;
}