How lo align div blocks by the center .
I dont need left and right spaces.
I need clearly code which is align inline element
https://jsfiddle.net/ax7ddqba/
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
.wrapper{
border:1px solid red;
width:980px;
text-align:center
}
.block{
border:1px solid green;
width:200px;
height:100px;
display:inline-block;
vertical-align:top;
}
I can do like this:
https://jsfiddle.net/yhocvf7p/
.wrapper{
border:1px solid red;
width:980px;
text-align:left
}
.block{
border:1px solid green;
width:240px;
height:100px;
display:inline-block;
vertical-align:top;
margin-right:123px;
}
.block:nth-child(3){
margin-right:0;
}
but it's not what I need.
If I understand your desired result correctly, which is that the blocks stack horizontally, and then appear in the center of the next row when they run out of room, you should be able to achieve this with text-align:center property.
https://jsfiddle.net/y7rtptxr/1/
#wrapper {
border:red 1px solid;
text-align:center;
width:260px;
}
#wrapper .block {
background:green;
border:#000 1px solid;
height:40px;
width:60px;
display:inline-block;
}
If I got you right, you can use font-size: 0; on your container and then you set needed font-size on your children, so you get this.
You need something like this? http://jsfiddle.net/x2pmjkww/
Related
* {
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
The text header is in the span label,it is a inline element,why it can't be displayed at the same line (or say,at the same height) with div header_inside?
To add margin-top:-20px; in css of div.header_inside can make text in span displayed at the same line with div header_inside,it is not my problem.
A div is, by default, display: block so it generates a block box with line breaks before and after it.
If you want it on the same line as some inline content, you'll need to change it to display: inline, display: inline-block, etc.
A div is a block element and need all the space. So no other element can be placed beside a block element. So you have to change the display of the div to inline or inline-block. You can change your code to the following:
* {
padding:0;
margin:0;
}
div.header {
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
display:inline-block;
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
You can use the "inline-block" property, so still a inline element but u can add width and height
<!DOCTYPE html>
<html>
<style type="text/css">
*{
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
display: inline-block;
}
</style>
<body>
<div class="header"><span>header</span>
<div class="header_inside">header_inside
</div>
</div>
</body>
</html>
My question is a little different from the following
CSS Float Logic.
My question is about the concept heightmore concret than that.
There are rules here
https://www.w3.org/TR/CSS22/visuren.html#float-rules
point8 A floating box must be placed as high as possible.
Point9 points out that a left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible and a higher position is preferred over one that is further to the left/right.
Now here is my example.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6">box6
</div>
</div>
</body>
Here is what i got. There are conflicts with point8 and point9 in my example. How to explain the default behaviour of browser to parse the css?
Why can't got the result as below?
There is a confused concepts between me and Quentin Roy at least ,to check the discussion as below, what does A floating box must be placed as high as possible mean?
Especially the word high here?
In the opinion of Quentin Roy, box4 and box5 are equally high for my example.
In my opinion, box4 are highest ,box5 are lowest ,box3 just in the middle of them.
My fore-end experts please show your correct interpretations on my example here ,to end the disccusion.
1 What does high mean in A floating box must be placed as high as possible?
2 Which is the highest and which is the lowst among box3 and box4 and box5?
You answered it yourself:
A floating box must be placed as high as possible
and
a higher position is preferred over one that is further to the
left/right
This is exactly what is happening. The algorithm first try to find the highest free area where your div can fit, then put the div at the rightmost position (in the case of float: right). As a result, box6 is positioned a little bit less on the right so it can be higher.
If it is not what you want, one solution is to use an invisible "spacer" to fill the hole underneath box5.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6spacer{
width: 250px;
float:left;
box-sizing: border-box;
border-width: 5px;
border-style: solid;
border-color: lightgray;
color: lightgray;
height: 40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6spacer">spacer
</div>
<div class="box6">box6
</div>
</div>
</body>
Another solution is to make use of the fact that a float: left will never go on the right of a float: right and vice-versa. As a result, if you find a way to make box3 floating left instead of right, box6 won't go on his left and thus, will be on top of it.
This is not always possible but in this case, you can have box3 at the same position while floating left (instead of right) if you insert it after box4 and box5:
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:left;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box3">box3
</div>
<div class="box6">box6
</div>
</div>
</body>
Here's my html for text boxes.. I want to display them "inline"
<div id="kutija_1">
<center><h2> Text1</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div id="kutija_2">
<center><h2> Text2</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div id="kutija_3">
<center><h2> Text3</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div id="kutija_4">
<center><h2> Text4</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
Here is my css code:
#kutija_1 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
#kutija_2 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:hidden;
border:3px black double;
border-radius:14px;
}
#kutija_3 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
#kutija_4 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
Probably I don't need this "kutija_2, kutija_3,kutija_4"..
My problem is that I only want to show these four boxes in one line. So i can put there news, contact stuff, quotes of the day etc...
Just add
display:inline-block;
To the blocks - JSFiddle Demo
Also, why do you need to use IDs if you're applying the exact same styling to each item. You could just add a class of box for example, and then you don't need to duplicate all those rules.
Another thing, the <center> tag is deprecated, so don't use that, if you want to center text use text-align:center in the CSS.
You can add float: left; to 1 block and give all the divs the same class, so they appear inline.
JSFIDDLE
HTML:
<div class="kutija_1">
<h2> Text1</h2>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div class="kutija_1">
<center><h2> Text2</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div class="kutija_1">
<center><h2> Text3</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
<div class="kutija_1">
<center><h2> Text4</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
CSS:
.kutija_1 {
position:relative;
float: left;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
.kutija_1 h2{
text-align: center;
}
Also note that i added .kutija_1 h2{ text-align: center;) do not use <center> this option is deprecated.
may i sure try this:
#kutija_1 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
float:left;
}
#kutija_2 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:hidden;
border:3px black double;
border-radius:14px;
float:left;
margin:0 2px;
}
#kutija_3 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
float:left;
margin:0 2px;
}
#kutija_4 {
position:relative;
width:25%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
float:left;
}
Try floating the div to left
#kutija_1, #kutija_2, #kutija_3, #kutija_4{float:left;}
Remove your IDs and add this class to all your boxes, it should do the trick
.text-box {
position:relative;
width:24%;
margin-right:1%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
}
http://jsfiddle.net/8Vvh9/
#kutija_1 , #kutija_2 ,#kutija_3 , #kutija_4{
display:inline-block;
width:23%;}
Is this what you are looking for?
WORKING DEMO
The Code:
.kutija{float:left;}
If yes, here is the logic.
The Logic:
You need to just create a class called for instance, .kutija and apply it for all the divs that have ids already assigned. The attribute for this class should have float:left;. Thats it.
Hope this helps.
First of All the Total width is 100%, in which u want to have four equal columns. Even if you use float:left or display:inline-block; that wont align all 4 divs together. so you have given 25% width + border which will be more than 100% + border width. so 3 columns will appear and one will appear at the bottom.
With this u will not be able to align all four div's together. So what i would suggest is you can do something like this
I just changed the code a bit u can check the html
<div class="common">
<div id="kutija_1">
<center><h2> Text1</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
</div>
<div class="common">
<div id="kutija_2">
<center><h2> Text1</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
</div>
<div class="common">
<div id="kutija_3">
<center><h2> Text1</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
</div>
<div class="common">
<div id="kutija_4">
<center><h2> Text1</h2></center>
<div class="stripeContainer"></div><br><br><br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>asdfasdfasdffdaasdf<br>
</div>
</div>
Css would be something like this
.common{display:inline-block; width:25%; float:left;}
#kutija_1 {
position:relative;
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
#kutija_2 {
position:relative;
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:hidden;
border:3px black double;
border-radius:14px;
}
#kutija_3 {
position:relative;
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
#kutija_4 {
position:relative;
width:90%;
margin-top:5px;
height:auto;
background-color:#fff;
overflow:auto;
border:3px black double;
border-radius:14px;
}
once it's multiple elements a simple
position:absolute;
bottom:0;
won't help since it will overlay the multiple elements
Here is a fiddle of my atempt : http://jsfiddle.net/7uYUP/
(it's the .interaction elements that I want to float right and bottom, right now they only float right)
I was hoping not having to resort to JS..
The problem is the height different between your green and yellow boxes (10pt vs 40pt). You can adjust for that with margin-top:
.interaction{
height:40pt;
width:100pt;
background-color:yellow;
float:right;
border: 1pt solid blue;
margin-top:-32pt;
}
http://jsfiddle.net/7uYUP/2/
<body>
<div id="container"><div>
<div class="interaction leftalign">
</div>
<div class="interaction">
</div>
</div></div>
</body>
body{
background-color:red;
}
#container{
position:absolute;
height:10pt;
width:100%;
background-color:green;
bottom:0;
}
#container > div {
position:relative;
height:100%;
}
.interaction{
height:40pt;
width:100pt;
background-color:yellow;
float:right;
border: 1pt solid blue;
}
.interaction.leftalign {
float:left;
}
So i have this rather strange issue, i am trying to line up some divs but i came across this strange problem. Let's say if i put <input type="checkbox" /> inside a div and would try to line it in the same line as other div it wouldn't work no matter what i try but if i add some text to the second div it suddenly start to work, why is that happening?
Here is example of my code to make thing a bit clearer: http://jsfiddle.net/wxgVw/2/
<div id="container">
<div id="container2">
<div id="left">
<input type="checkbox" />
</div>
<div id="right">
</div>
</div>
</div>
body{
margin:50px;
}
#container{
width:770px;
height:400px;
border:1px solid red;
}
#container2{
width:700px;
height:50px;
margin:10px;
outline:1px solid red;
padding:10px;
}
#left{
width:30px;
height:30px;
outline:1px solid green;
display:inline-block;
zoom:1;
*display:inline;
}
#right{
width:400px;
height:30px;
outline:1px solid black;
display:inline-block;
zoom:1;
*display:inline;
}
Whenever you use display: inline-block it is always a good idea to also specify vertical-align: top (or bottom depending on what you want). That would prevent this issue.
You could also use the float property. Just float both divs to the left and make sure overflow: hidden is set to to container above to prevent floating issues.
I edited your sample:
http://jsfiddle.net/wxgVw/4/
#container2{
width:700px;
height:50px;
margin:10px;
outline:1px solid red;
padding:10px;
overflow:hidden;
}
#left{
width:30px;
height:30px;
outline:1px solid green;
float:left;
}
#right{
width:400px;
height:30px;
outline:1px solid black;
float:left;
}