I am trying to place three divs side by side and
fourth div in the next row. I used float:left and width:33%.
What else property I need to apply to achieve this?
https://jsfiddle.net/wdvpubau/
Edit: One more thing regarding the same css styles,
I made property display:inline within css .divinline , but there is no difference in rendering. I had learnt that display:block will occupy the entire row. Is it being overridden?
Another way is as below
<div>
<div style="float:left;width:100px">1</div>
<div style="float:left;width:100px">2</div>
<div style="float:left;width:100px">3</div>
<div style="float:left;width:100px">4</div>
</div>
As rightly suggested by #Imran, you need to remove the . before the css class names while you use them in html. Try:
.divinline{
display:block;
float:left;
width:33%;
}
.maindiv{
display:block;
}
<div class="maindiv">
<div class="divinline"> <!-- here the class is class="divline" and not .divline -->
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
</div>
Fiddle here : https://jsfiddle.net/nithin_krishnan/r0Lyydg8/
Related
how can I place many paragraphs or div elements next to each other, that I see no difference between them? For example:
<div>
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
They are placed under each other, but I want them to be side by side, and please don't write me other ways, for example something like: 'you can write the text in one div'... :) I saw this question several times from other users, but they had a bit different problem like mine, so please answer me this question
Thanks
<div>
<span>hey, how ar</span>
<span> you?</span>
</div>
or
.text {
display: inline-block;
}
<div>
<div class="text">hey, how are</div>
<div class="text"> you?</div>
</div>
or
.container {
display: flex;
}
<div class="container">
<div>hey, how are</div>
<div> you?</div>
</div>
div is a block-level element, which means that it will take up the whole of a 'row' on the screen, unlike inline elements.
I'd suggest you have a read through of the MDN pages on these two categories to get a better understanding of this:
Block-level elements
Inline elements
Among the many ways of solving this (change divs to an inline element type like span, using flexbox, etc), one option is to force your div to be inline by changing their CSS:
.text1, .text2 {
display: inline-block;
}
You can do this in many ways. Here I'll be showing classic ways to do this.
using display:inline-block property of css.
.text1{
display:inline-block;
}
.text2{
display:inline-block;
}
using display:flex property of css.
html:
<div class="text-wrapper">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
css:
.text-wrapper{
display: flex;
}
There are several ways of accomplishing this. You could do it with CSS Flexbox, CSS Grid, CSS float, or you could change the display property on the DIV's.
As you have tagged your question with "Angular", it is very common to use the Angular Flex Layout package for positioning (https://github.com/angular/flex-layout). If you add this package to your project, you could solve it like this:
<div fxLayout="row" fxLayoutAlign="start">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
Why don't you use bootsrap? This is a typical scenario for placing things side by side.
<div class="d-flex justify-content-center">
<p></p>
<p></p>
<p></p>
</div>
2 of them should be on the same line and the next div should fall just below them, while both 3 divs centered in the middle of the wrapper. I am targeting a register and login then a search box below both of them
my html is
<div id="wrapper">
<div id="reglog>
Register
Login
</div>
<div id="search">Quick Search</div>
</div> <!--End of wrapper-->.
my css is
#wrapper{
float:right;
max-width:380px;
text-align:center
}
#reglog{
display:inline-block
}
I was hoping that not giving any style to id=search, it will just fall below the reglog block...
Any help on why I cant get this to work?
Thanks
Michelle
Just use display:block; instead of inline-block. Check updated snippet below..
#wrapper{
float:right;
max-width:380px;
text-align:center
}
#reglog, #search{
display:block;
}
<div id="wrapper">
<div id="reglog>
Register
Login
</div>
<div id="search">Quick Search</div>
</div> <!--End of wrapper-->.
I recommend to use display:flex; and specify the flex direction you want using flex-direction: row | row-reverse | column | column-reverse;
Also you should attach these CSS properties to a <div></div> which contain all of your three divs.
You can find all information about this here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}
jsFiddle: http://jsfiddle.net/2CRZP/
I want to put the grey box in the middle of the screen using vertical-align:middle or something (CSS).
<div class="container-fluid">
<div class="hero-unit">
<h1>Test</h1>
<p>stackoverflow</p>
<p>
<div class="row-fluid">
<div class="span2">BASE CSS</div>
</div>
</p>
</div>
</div>
http://jsfiddle.net/2CRZP/2/
You have to put this:
.container-fluid {
position:absolute;
top:50%;
margin-top:-160px;
}
In the margin-top you have the half of the height div in negative. (If you edit it)
And vertical-align:middle its only for TD tables. ;)
You mean the green box ?! I don't see any gray box
If you want to use vertical-align with divs, try the display:table-cell;
http://phrogz.net/css/vertical-align/
There is a strange issue in this simple html structure. Here is the html code
<body>
<div class='DatePicker' style="display: inline-block">
<div id="dayDiv" class='DayDiv BorderMe'>
<div id='upArrowDivs' class="BorderMe" style='display: inline-block; height:10%;width:100%;'>
<div class='UpArrowDiv BorderMe'>
</div>
<div class='UpArrowDiv BorderMe'>
</div>
</div>
</div>
</div>
</body>
Here the two innermost divs are displaying outside of its parent div which has id "upArrowDivs". Here is the JsFiddle link where you can see whats going on in StyleSheet.
Add this rule to .UpArrowDiv
vertical-align: top;
see the fiddle
Add this on your css file
#upArrowDivs{overflow:hidden;}
Here is the Solution.
Addition to CSS:
#upArrowDivs{overflow:auto;}
You need to add an overflow for the same.
Hope this helps.
Here are the options
1) Increase your height of "upArrowDivs"
2) Set Padding=0 for "upArrowDivs" and margin=0 to innermost divs