I am trying to get the contact form on this page to display on the left and the contact information (the address at the bottom) to display on the right. The divs are both small enough widths that it should not be a problem, and they are both floated to the left. It doesn't seem to be working however. Does anyone have any idea what the problem could be?
The code is shown below:
#mid {
width: 793px;
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
float: right;
height:auto;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
clear: right;
padding-bottom:10px;
}
#mid #contact-info {
float:left;
width:250px;
text-align:left;
padding:14px;
}
#mid #contact-form {
float:left;
text-align:left;
width:300px!important;
}
You can create a common parent div and float one left and the other right with specific width.
You can do this...
#mid #contact-info {
float:right;
width:250px;
text-align:left;
padding:14px;
}
#mid #contact-form {
float:left;
text-align:left;
width:300px!important;
}
But like you say...it should be working how it is....
But without your HTML, we can't really help anymore
Is this what you are trying to do?
http://jsfiddle.net/R6Mra/
CSS
.left {
float: left;
}
.right {
float: right
}
#parent {
border: 1px solid black;
padding: 15px;
width: 50%;
}
#box1, #box2 {
border: 1px solid black;
padding: 15px;
}
HTML
<div class="right" id="parent">
<div class="left" id="box1">Hello World!</div>
<div class="right" id="box2">Hello World!</div>
</div>
Related
Trying to show dive next of span but it is not working.I do not know how to align. If anyone know please help to find the solution.
app.component.html:
<div class="content">
<div class="title">Titles</div>
<span class="icons"> images </span>
</div>
app.component.css:
.content{
width: 100%;
height:150px;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
}
expecting:
Demo:https://stackblitz.com/edit/angular-svg-use-2c9trb?file=src%2Fapp%2Fapp.component.css
Use display:inline-block;
p {
font-family: Lato;
}
.content {
width: 100%;
height: 150px;
direction: rtl;
text-align: left;
}
.title {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
.icons {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
and use direction and rtl to reverse direction of elements
add inline-flex to displays as an inline-level flex container. Then add margin-inline-end to get space between div and span.
.content{
width: 100%;
display: inline-flex;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
margin-inline-end: 5px;
}
I have used text-align: left; in the css class name-tag but somehow the name is still aligned to the right hand side of the div. Why?
.container {
width:500px;
position:absolute;
display:table;
border: 2px solid red;
}
.img-circle {
background: yellow;
border-radius: 50%;
width: 60px;
height: 60px;
border: 2px solid #666;
font: 32px Arial, sans-serif;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.name-tag {
display:table-cell;
padding-left:75px;
vertical-align: middle;
text-align: left;
border: 1px solid black;
}
<div style="container">
<div class='img-circle'>
AK
</div>
<div class='name-tag'>
Aaron King
</div>
</div>
Sample code can be found here: http://jsfiddle.net/kongakong/6Lrfwt7m/3/
The outcome is this:
In your fiddle you have <div style="container"> instead of <div class="container">
Then you have padding of 75px so its not totally on the left.
It is aligned to the left, you just have large padding to make it seem like it's not. Remove padding-left:75px; and your problem is fixed.
the problem is that there is padding on left and so the cell seems aligned at right.
if you remove the padding you can see that is working correctly.
Check this fiddle:
.name-tag {
display:table-cell;
padding-left:75px;
vertical-align: middle;
text-align:left;
border: 1px solid black;
padding-left:0;
padding-right:30px;
}
http://jsfiddle.net/6Lrfwt7m/8/
Add CSS Box Sizing for width fixed in padding.
.name-tag {
display:table-cell;
padding:10px;
vertical-align: middle;
text-align: left;
border: 1px solid black;
box-sizing:border-box;
}
I want to make all divs side by side.
I mean remove the space form top of the #div3 and #div4.
I tried float and display:inline-block
my code :
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
#div1 {
display: inline-block;
width:220px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:260px;
height:260px;
border: 1px solid green;
}
#div3 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
#div4 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
http://jsfiddle.net/u5y6tuwm/
One solution is to use flex in the parent container:
#wrapper {
display: flex;
/*set display to flex*/
margin-top: 20px;
}
#wrapper > div {
margin-right: 10px;
/*add some margin to the right to direct children div*/
}
#div1 {
width: 220px;
height: 120px;
border: 1px solid red;
}
#div2 {
width: 260px;
height: 260px;
border: 1px solid green;
}
#div3 {
width: 100px;
height: 160px;
border: 1px solid green;
}
#div4 {
width: 100px;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
vertical-align: top;
to each div1, 2, 3 and 4
you can add this to affect all divs on the page
div {
vertical-align: top;
}
or this for all divs within #wrapper div
#wrapper div {
vertical-align: top;
}
or this to target each div you want ( 1-4 )
#div1, #div2, #div3, #div4 {
vertical-align: top;
}
or to each one individually, or inline style and so on.
You just need to add
#div1, #div2, #div3, #div4 {
float:left;
}
This will work perfectly. Also do not forget to clear the float after
I am trying to achieve something like this: http://i.minus.com/ibxOaBw7BW8b5g.png
This is what I have so far: http://jsfiddle.net/QAPub/2/
How can I center the wrapper/container? I really don't care if the container exists or not, my main goal is the center the three black divs but this is as far as I have gotten.
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
There are a couple of different ways you can accomplish this.
Here's the one I would use, put the container in the body and give it margin and position it wherever you want to.
http://jsfiddle.net/QAPub/3/
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
use the following css for ".clearfix "
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}
here is the jsFiddle file.
With this css
.addProblemClass{
width:300px;
height:300px;
border:solid 1px #000000;
background-color:#FFFFFF;
opacity:0.9;/*For chrome and mozilla*/
filter:alpha(opacity=90);/*For IE*/
}
.boxHeader{
border: solid 1px #000000;
height: 15%;
}
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
margin:-1px;
width: 80%;
height: 100%;
float: left;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
margin:-1px;
float: left;
width: 20%;
height: 100%;
}
boxBody{
border:solid 1px #0000FF;
margin: -1px 0px;
height: 85%;
width: 100%;
}
and this html
<div class="addProblemClass">
<div class="boxHeader">
<div class="addProblemHeaderImageDiv"></div>//DIV A
<div class="addProblemHeaderTextDiv"></div>//DIV B
</div>
<div class="boxBody"></div>//DIV C
</div>
DIV C is not visible.
Any ideas for the reason why this is hapenning?
Thank you
Add a . before boxBody in css ..
.boxBody{
}
because DivC has % width and height, but as it contains nothing the percentage is a percentage of 0 which will always be 0
edit: make it a fixed width like px or em and it will show, or add some content into it.