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;
}
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 have certain boxes which I want them to be side by side. I used float:left;margin-left:10px; and successfully achieve my aim.
But I want to lock their positions on screen i.e. fixed w.r.t to screen and no movements according to mouse. For that I tried to use `position:fixed', it too worked, but now it created a problem.
The problem is that the two boxes are now overlapping with each other and displaced with their location.
Her is the fiddle
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
float: left;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
You can set the fixed property to parent div. Try this fiddle.
CSS
.chatWindow-parent{
position: fixed;
}
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
HTML
<div class="chatWindow-parent">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
http://jsfiddle.net/2csBx/
You have to have 2 different classes. Otherwise by fixing the position you are telling them to be fixed in the same location.
Need to add a parent class
HTML
<div class="chatContainer">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
CSS
body{
height: 2000px;
}
.chatContainer {
position: fixed;
bottom: 10px;
}
.chatWindow {
display: inline-block;
position: relative;
float: left;
width: 250px;
height: 280px;
bottom: 10px;
margin-left: 10px;
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
Try this fiddle: http://jsfiddle.net/ETwEF/2/
My goal is to place four divs within a single "container" div. Here's my code so far:
HTML
<body>
<div id="navBar">
<div id="subDiv1">
</div>
<div id="subDiv2">
</div>
<div id="subDiv3">
</div>
<div id="subDiv4">
</div>
</div>
</body>
CSS
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
margin-left: 25%;
}
#subDiv3
{
float: left;
margin-left: 50%;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
margin-left: 75%;
}
As far as I know this is the only part of my code that's relevant to my question so I left some other parts out.. Don't mind the width and margin of the navBar, because it's actually within another container as well.
P.S I searched Google and StackOverFlow and I could not find an answer that was helpful. There were many questions about placing two divs within a single div, but none for aligning multiple divs within a single div.
Thanks for any help in advance!
I'd do two things, get rid of the margins on your floated divs and add the box-sizing rule.
jsFiddle example
#navBar {
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4 {
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
box-sizing:border-box;
}
#subDiv1 {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
#subDiv2 {
float: left;
}
#subDiv3 {
float: left;
}
#subDiv4 {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
You can use display: table
.menu {
display: table;
width: 100%;
border: 1px solid black;
border-right: none;
box-sizing: border-box;
}
.menu > div {
display: table-row;
background-color: green;
}
.menu > div >div {
border-right: 1px solid black;
display: table-cell;
text-align: center;
}
#media screen and (max-width: 400px) {
.menu {
display: block;
float: left;
width: auto;
border: none;
}
.menu > div {
display: block;
}
.menu > div > div {
border: none;
padding-right: 10px;
display: block;
text-align: left;
}
}
fiddle
The main issue that I saw with your css is that you add in a margin for each float item. This would make sense if it was positioned absolutely. Since it isn't the divs will stack. Removing the margins will allow the divs to fit in the container:
http://jsfiddle.net/eGLTM/
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 24%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
}
#subDiv3
{
float: left;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
I think the problem you are having, is that you need to clear your floats. This might not be the best way to do it, but for simplicities sake, add this:
<div style="clear:both;"></div> after the last <div> inside your container(#navBar).
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;
}
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%;
}