There is a div container #filters that holds all DOM components. Each DOM components is assigned with class 'form-field-in-a-row'. Here is the css definition:
div#filters { border: solid 0px #ccc; }
div#filters .dijitTextBox { width: 150px; }
div#filters input.submit { width: 60px; float: left; margin-top: 25px; margin-right: 3px;}
div#filters input.reset { width: 60px; float: left; margin-top: 25px; margin-left: 3px;}
.form-field-in-a-row { margin: 10px 0px; min-height: 22px; width: 200px; float: left;}
Now I can see each DOM object does deploy from left to right but still on a stack, like this:
Then how can I actually put everything in a row without the height difference?
display:inline-block; should be applied to your divs. The inline makes them go on the same line and the block lets you assign a width + height to them through CSS.
If you were to put a display:inline; on them they should move inline with one another.
Related
I'm having problems centering an image between two float-aligned pictures.
I can't add margin-left to the image in the middle. I would like it to stay centered on resizing.
My code:
#skjirt {
display: inline;
margin-left: auto;
margin-right: auto;
float: flex;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt1 {
display: inline;
float: left;
margin-left: 20px;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt2 {
display: inline;
float: right;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
margin-right: 20px;
}
#imageWrap {
width: 100%;
height: auto;
margin-top: 100px;
}
If you want to make the image blocks display in the middle then instead of aligning them using float, just center them by applying the text-align:center to the #imageWrap container. Also change your display:inline to display:inline-block so that the img or any other element inside the boxes conform and adjust to the parent width and height.
Below is a sample code using your classes and I modified it with the suggested solution.
P.S. The suggested solution also makes the boxes to be responsive. :)
https://codepen.io/Nasir_T/pen/wqjKoa
I'm trying to get two divs to sit side by side. On my computer, in Safari and Firefox, it appears correctly. However, on my client's computer (also using Safari) they are overlapping.
Here is my CSS:
#content
{
clear: left;
float: left;
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline;
}
#aside
{
min-height: 850px;
float: right;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline;
position:absolute;
}
Is there something I missing or have coded wrong? I'm not a web developer but have been tasked with creating a fairly simple page.
Thanks in advance.
If you want something simple and straightforward (assuming #content and #aside are two sibling divs)...
<div id="content"></div><div id="aside"></div>
#content, #aside {
float: left;
}
#content {
background: red;
width: 150px;
height: 150px;
}
#aside {
background: orange;
width: 280px;
height: 150px;
}
Here's a Fiddle to demonstrate
Note: this is a simple solution that might not be the best for what you need. I suggest doing some research on CSS display and position properties.
Hey just change the display property to display: inline-block. You dont need to float any div if you want the div to sit side by side.
#content
{
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline-block;
}
#aside
{
min-height: 850px;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline-block;
position:absolute;
}
display: inline
It will not regard the width or height of any div. When we set display: inline, it will work as if its a "span" which does not regard width or height.
display: inline-block
It will regard the width or height of any div. When we set display: inline-block, it will be inline and it will regard the width and height of div.
I have been stuck with this div in the header wrapping to the next line when the window is resized. You can view it at http://www.commexfx.com . The right div in the header which includes the search box etc is wrapped to the next line when resizing the window. I tried everything: changing position, display, white-space, etc, but nothing. the structure is like this:
<div id="header">
<div id="logo"> </div>
<div class="top-widget"></div>
</div>
And the CSS code for the time being is:
#header {
margin: 0 auto;
/* max-width: 960px; */
width: 960px !important;
height: 100px !important;
border: 1px solid blue;
background-color: #ffffff;
white-space: nowrap !important;
}
#logo {
float: left;
z-index: 9999999;
margin-bottom: 20px;
width: 360px;
display: inline;
border:1px solid green;
padding: 0 !important;
margin: 0 !important;
}
.top-widget {
background: none;
border: none;
/*clear: right;*/
float: right;
height: 95px;
text-align: right;
display: inline;
width: 590px !important;
border: 1px solid yellow;
padding: 0 !important;
margin: 0 !important;
}
Would appreciate any help. Also searched the forums here and tried every possible solution I could find but nothing.
Thanks
Add min-width:960px to your css #header declaration.
Replace your css with these new ones. Floating two elements, one right and one left will make them wrap so I would use inline-block.
You don't need position:relative unless you are positioning elements within that div as absolute so you can remove those as well. Same with z-index.
Also, you don't need !important unless you have other styles overriding this. I try and use it sparingly.
#header {
margin:0 auto;
width:960px;
}
#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}
#logo img {
vertical-align: inherit;
}
.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}
For some reason, the bottom section of my layout doesn't seem to be centered when I have set the left and right margin to auto
http://codepen.io/anon/pen/kvtcp
Please see the example.
I have since changed the code with some example you have provide but I have another issue. The bottom div has pushed up to left and right section div?
I have used margin-top 20px and nothing happens
Regards
Just remove:
float:left
from the .bottomsection class
and add
clear:both;
instead...
This is occuring because you have the div set to float left and the screen is the left edge.
Your divs above have margin left to pad them in.
I would suggest center your container.
http://codepen.io/anon/pen/sHvCA
body{
background:#90F;
}
#container {
width: 1000px;
height: 1200px;
padding-top: 25px;
overflow: auto;
margin:0 auto;
}
.header {
width: 800px;
height: 100px;
}
.leftimage {
float: left;
}
.middle {
height: 200px;
background:#FFF;
width: 800px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.leftsection {
width: 300px;
background-color: #FFF;
height: 400px;
margin-top: 10px;
float: left;
margin-left: 100px;
}
.rightsection {
background-color: #0F0;
height: 400px;
width: 479px;
float: left;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 20px;
}
.bottomsection {
clear:both;
height: 200px;
background: #FFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
That is because you have float:left; on it. Remove that, and add clear:both; instead.
I would recommend wrapping the left and right floated divs in another div, and apply overflow:hidden on the outer div for better control.
Ok,
remove the float from your bottom div.
.bottomsection {
height: 200px;
background: #FFF;
width: 800px;
/*float: left;*/
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
And in your HTML you have to clear the floats with i.e
<div class="leftsection"></div>
<div class="rightsection"></div>
<div style="clear:both;"></div>
<div class="bottomsection"></div>
This is a quick and dirty solution.
Here is a good link i.e. about floating div´s
http://css-tricks.com/all-about-floats/
It is floating for no reason and this causes showing up on the left side. Remove that. This time it should be fine, but you won't be able to see it because it has nothing in it. Add overflow:hidden; to avoid this. Then you might want to give some margin as well. And please keep in mind, use floats wise, not every problem requires float.
I see that when we use table + tr + td we never see inner elements outside of outer elements.
But in case of Divs it can be.
Now I see that my inner div is located outside of parent div.
How to control child divs? What is wrong in my html?
I mean I have next html and I see that child div is outside of the parent
<div id="page">
<div id="main">
<div id="djInfo">
</div>
<div id="footer">
</div>
</div>
</div>
#page
{
width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
}
#main
{
padding: 0px 0px 0px 0px;
background-color: #0c1114;
margin-bottom: 30px;
_height: 1px; /*only IE6 applies CSS properties starting with an underscore */
text-align: center;
height: 100%;
position: relative;
}
#footer
{
color: #999;
padding: 0px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
background-image: url('img/BottomGradient.jpg');
background-repeat:repeat;
height: 160px;
width: 100%;
float: left;
}
#djInfo
{
float: left;
position: relative;
margin-left: 250px;
}
I kinda constructed what you posted and everything seems to work fine?
http://jsfiddle.net/XrDTe/
But please, double check your code, there are some redundancies in it.
(Why give something with 100% width margin-left/right: auto? Why all the float: left's and the position: relative's? Why the IE6 height of 1px? All of this is not necessary and may hinder you in writing decent, to-the-point CSS)