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%;
}
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 can't seem to be able to get the third "promobox" to come up to the first row with the other two, it just goes onto the next row but it is set to a percentage so it shouldn't matter.
I have tried to fix this with an answer from another forum but I simply can't do it.
Help would be great.
Thanks heaps.
<html>
<head>
<style>
* {
margin: 0px; padding: 0px; border: 0px;
}
#container {
width: 100%; height: 500px;
max-width: 1440px; min-width: 1024px;
margin: 0px auto;
border: 2px solid blue;
text-align: center;
}
.bigbox {
height: 530px;
background-image: url(images/photos/landscape-1440.jpg);
background-position: 50% 50%;
border: 2px solid red;
}
.promobox {
width: 25%;
height: 200px;
display: inline-block;
background-position: 50% 0%;
border: 2px solid green;
margin: 0px;
padding: 0px;
vertical-align: top;
}
.promobox div {
height: 200px;
border-color: #FFF;
border-style: none;
}
div {
text-align: center;
position: relative;
}
div a {
position: absolute;
bottom: 10px; right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#pb1 {width: 25%;}
#pb2 {width: 50%;}
#pb3 {width: 25%}
</style>
</head>
<body bgcolor="white">
<div id="container">
<div class="bigbox">
<div class="promobox" id="pb1">#</div>
<div class="promobox" id="pb2">#</div>
<div class="promobox" id="pb3">#</div></div></div></body></html>
You have two things that could mess the 3 boxes getting aligned next to each other.
The given border:2px solid green; and the display: inline-block;
You cant have the boxes have a total of 100% when using border.. because the borders need to be a part of the 100%.
.promobox {
width: 25%;
height: 200px;
float:left; /*Change the display:inline-block to this */
background-position: 50% 0%;
margin: 0px;
padding: 0px;
vertical-align: top;
}
Working DEMO (without the borders)
You are not accounting for the border of the divs thus you're going over the 100% width. The simplest solution would be either removing the border or having the total width less than or equals to 98%
e.g.
#pb1 {width: 24%;}
#pb2 {width: 50%;}
#pb3 {width: 24%}
Finaly i make an answser of my comment : DEMO with the fix below
In your HTML you have empty space in between div, it generates a white-space once you display your div as inline-block.
25%+50%+25% + 2 white-space +borders is more than 100% .
borders can be included using box-sizing, and white-space erased from HTML with <!--comment--> or via CSS setting font-size to 0 and back to 16px or so for .promobox.
Update for your CSS:
.bigbox {
font-size:0;
}
.promobox {
box-sizing:border-box;/* add vendor prefix where needed */
font-size:16px;/* fallback*/
font-size:1rem;
}
Try this:
<html>
<head>
<style>
* {
margin: 0px; padding: 0px; border: 0px;
}
#container {
width: 100%; height: 500px;
max-width: 1440px; min-width: 1024px;
margin: 0px auto;
text-align: center;
}
.bigbox {
height: 530px;
background-image: url(images/photos/landscape-1440.jpg);
background-position: 50% 50%;
}
.promobox {
width: 25%;
height: 200px;
display: inline-block;
background-position: 50% 0%;
margin: 0px;
padding: 0px;
vertical-align: top;
float:left;
}
.promobox div {
height: 200px;
border-color: #FFF;
border-style: none;
}
div {
text-align: center;
position: relative;
}
div a {
position: absolute;
bottom: 10px; right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#pb1 {width: 25%;}
#pb2 {width: 50%;}
#pb3 {width: 25%}
</style>
</head>
<body bgcolor="white">
<div id="container">
<div class="bigbox">
<div style='background:red' class="promobox" id="pb1">#</div>
<div style='background:green' class="promobox" id="pb2">#</div>
<div style='background:yellow' class="promobox" id="pb3">#</div></div></div></body></html>
here's a working demo of two divs in a row
<div style="text-align:center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>
Demo
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.
I'm trying to center the dotted line horizontally with CSS. At the moment, it appears at the bottom. Is there a way I can offset it with -5px or something?
HTML
<div class="divider"></div>
CSS
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height:30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
border-bottom: 2px dotted #b38b0d;
}
no. But you can create another element that have the border and move it within the .divider
html
<div class="divider">
<div class="inner"></div>
</div>
css
.inner {
margin-top:19px;
border-bottom: 2px dotted #b38b0d;
}
Demo: http://jsfiddle.net/5xMG7/
You could also use :before or :after pseudo-selectors, to get rid of the inner element.
<div class="divider"></div>
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height: 30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
}
.divider:after {
content: '';
display: block;
margin-top: 19px;
border-bottom: 2px dotted #b38b0d;
}
http://jsfiddle.net/5xMG7/540/
If you mean center it vertically, one way you can do it is like this:
<div class="divider"><span class="line"></span></div>
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height:30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
}
.line
{
border-bottom: 2px dotted #b38b0d;
margin-top:15px;
display:block;
}
take a look at this Code. i want the Left & Right Box (DIVs) to appear in one line.. how to do it
<div><div style="float:left">a</div> <div style="float:left">b</div></div>
<div style="clear:both"></div>
Float both the left and right divs to the left and clear the footer. You will also need to adjust the widths of the left and right divs for them to fit on the same line.
#left
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#right
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#footer
{
position: static;
width : 100%;
height : 50px;
margin-top: 10px;
background: #111111;
border: solid 3px #ff0000;
text-align: center;
clear: both;
}