I'm trying to understand the basics of css applied to a test site that I'm working with.
Reducing the problem to it barest case I have three equal , two of which should contain lists, the third of which does not.
The html is as follows:
<div id="Div1" class="Results">
<select id="FirmList" size=10></select>
</div>
<div id="Div2" class="Results">
</div>
<div id="Div3" class="Results">
<select id="PersonList" size =10></select>
</div>
And the css as thus:
div {
border: 1px dashed black;
border-radius: 5px;
padding: 10px;
margin: 8px;
}
select {
width: 290px;
}
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
}
If I comment out the elements the three s align correctly.
Bringing in either causes it's parent to move down the page. None of the other elements on the page (tables, headers and other divs) seem to affect the alignment in the same way.
Any suggestions?
Add vertical-align:top to the .Results rule
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
vertical-align:top;
}
Demo at http://jsfiddle.net/QBVz9/1/embedded/result/
It has nothing to do with the select elements. even if you put a single letter in the .Results elements it will cause the problem.
It has to do with the fact that you have turned the div elements to display:inline-block.
.float-left {
float:left;
}
Fiddle example
A solution could be to add float on select element.
Related
.useless {
float: right;
clear: right;
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
display: flex;
justify-content: center;
height: 250px;
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
I have 2 divs inside a div that refuse to act as block elements. For some reason, they are displayed in-line, not below each other. Could you explain what is the cause for this, not only how to solve it?
Larger div has width and height set.
Smaller divs also have their dimensions set.
Display:block is used on all 3 divs.
I tried using float, didn't work.
I tried using clear together with float, didn't work.
The only thing that is working but terribly, is giving each of them position:relative.
You don't need to provide me with code, just please try to explain why this happens, what is the general problem, and how do you solve it, because to me, as a beginner, it doesn't make sense that they display each other sometimes below, sometimes next to each other.
It's because you use flex on the parent - the default for children of flex parent is to align next to each other, remove the flex and it will work.
I would also say that as your children are 100% width, there is no need for floating so you can remove that too
.useless {
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
justify-content: center;
height: 250px;
}
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
More information about flexbox
Flexbox playground (codepen)
I am just learning CSS so this is probably something super basic that I am just messing up. I have a page with 2 header divs one main content div and a footer div. I just have an image and a couple of lines of text in the main content div and I want them to display vertically. I have the text broken up like I want with spans and have display:block in the CSS for the div. I thought this would display everything vertically but it is still displaying all in one line.
I appreciate any help you can provide.
#a {
border: 2px solid #000000;
float: left;
margin: 10px 0px;
width: 30%;
}
#b {
border: 2px solid #000000;
float: right;
margin: 10px 0px;
width: 60%;
}
#c {
border: 2px solid #000000;
margin: 10px 0;
padding: 50px;
display: block;
text-align: center;
}
#d {
border: 2px solid #000000;
margin: 10px 0;
padding: 50px;
}
#e {
border:2px solid #000000;
margin: 10px 0;
width: 100%;
overflow: hidden;
}
img {
width: 150px;
height: 150px
}
Relating to this HTML
<div id="c">
<span><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></span>
<span>There and Back</span>
<span>My journey</span>
</div>
The image and following spans are all being displayed inline. There is currently no content in the other divs.
Thank you for your help.
<span>'s by default are inline.
You should be using divs if you want blocks. But if you want to force the span's in your html to be blocks (you shouldn't - you should change them to divs), just do this:
#c span { display: block; }
The easiest way to do this is remove the <span> tags, replacing them with <div>
The span tag is becoming redundant, I never use it any more as a DIV behave much better in all situations. Span doesn't like to be stylised.
Keep your CSS the same.
Your new HTML:
<div id="c">
<div><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></div>
<div>There and Back</div>
<div>My journey</div>
</div>
I want to have a block on the left and a box which contains text to its right, but I don't want the text that wraps to drop under the block. It should stay with the confines of a rectangle that is adjacent the block. This is how a table would behave, but I'm not sure what the best way to accomplish this outside of one is.
I hope this fiddle will clarify: http://jsfiddle.net/bernk/Ck7cj/
<div class="container">
<div class="block">BLOCK</div>
<div class="text">This is a text box that wraps onto at least two lines</div>
</div>
Instead of floating you can use display:table-cell:
jsFiddle example
* {
box-sizing: border-box;
}
.container {
width: 200px;
border: 1px solid black;
overflow: auto;
}
.block {
display:table-cell;
width: 70px;
height: 20px;
background: red;
color: white;
text-align: center;
}
.text {
border: 1px solid red;
display:table-cell;
}
I have two divs contained within a larger div and I'd like them to be laid next to each other. My approach was to float the first div left and set Overflow: hidden on the containing div.
For some reason it's not working and the 2nd div ends up ontop of the first.
Herse is the demo, http://jsfiddle.net/9xmDP/. I have some color coding which I was using to try and debug the overlapping. The code is also below. The signup form should be next to the login form instead of on-top of it.
HTML
<div id="container">
<div id="signupDiv">
<div id="signupLabel">
SignUp
</div>
<form id="signupForm">
User <input type="text" name="user"><BR/>
</form>
</div>
<div id="loginDiv">
<div id="loginLabel">
Login
</div>
<form id="loginForm">
User <input type="text" name="user"><BR/>
</form>
</div>
CSS
#container{
overflow: hidden;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
border: solid pink 1px;
}
Try this css. fiddle here
#container{
width:604px;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
width:300px;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
float:left;
border: solid pink 1px;
}
You need to float:left #loginDiv as well. See your updated fiddle here:
http://jsfiddle.net/9xmDP/2/
When you float an element, it is removed from the normal content flow, and any content in its parent element and other children of the parent tries to wrap around it.
So the signupDiv is indeed floated to the left, which puts it on top of the non-floating loginDiv. The content in the loginDiv does try to wrap around the signupDiv, but since you've specified both elements to be 300px wide, there's no room for it, and so it must go below the floating div instead.
The simplest solution is to float both divs, like this:
#signupDiv, #loginDiv {
float: left;
}
You can place the divs next to each other, by making them both float.
If you make the container 605px, then the divs will fit in there (including the border)
#container{
width: 605px;
overflow: hidden;
}
And this
#loginDiv{
float: left;
width: 300px;
border: solid pink 1px;
}
Diplay:inline will also do the trick here..
http://jsfiddle.net/9xmDP/4/
#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}
Take this HTML:
<div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
</div>
With the companion CSS:
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px;
background: red;
}
The result of this is four blocks, which have between them 2 pixels of space (1px from the right margin of the left block and 1px from the left margin of the right block).
Is there a way that I can achieve a similar effect to border-collapse? ie. I want there to be only one pixel of margin between adjacent blocks.
This is a basic example of often more complex situations that I run into, and I don't want to get around it by by anything similar to only setting margin-left to 1 pixel etc.
There are multiple ways to this
One of them is
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px 1px 1px 0;
background: red;
}
div.block:last-child {
margin: 1px 0 1px 0;
}
Another is
div.block+div.block { margin-left: 1px; }
You can check the demo of both way here
How about using the CSS selector :first-child and :last-child to alter the first and last <div>?
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 2px 1px 2px 0;
background: red;
}
div.block:first-child {
margin-left: 2px;
}
div.block:last-child {
margin-right: 2px;
}
If you can alter the markup itself, then I guess we can have a cross browser compatible solution:
<div class="block"> <div class="block_2"></div> </div>
and then apply the css like:
div.block{float: left; width: 100px; height: 100px; }
div.block_2{width:99px; height:100px; background-color:red}
Assign a class for last block called 'last'.
The set margin-right of every block to 1px.
Set margin-right of block that has last class to 0.
.block.last { margin-right: 0px; }
Pseudo selectors like forst-child and last-child are not well supported so I think this is the best option you have.