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;
}
Related
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/
Can you, please, help me to remove the far right margin from my boxes?
I am trying to use the ::after pseudo element in CSS but it doesn't seem to work. (http://jsfiddle.net/ve0Laa8f/)
<div class="content-wrap">
<div class="content-center-wrap">
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"><p>test</div>
</div>
</div>
.content-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:#fff;
margin: 0 auto;
padding-top:40px;
padding-bottom:40px;
}
.index-cats-wrap{
display:block;
float:left;
width:298px;
height:400px;
margin-right:20px;
border:1px solid #95a5a6;
}
.index-cats-wrap::after{
margin-right:0px;
}
Thanks.
You need :last-child css selector.
.index-cats-wrap:last-child {
margin-right: 0px;
}
Fiddle: http://jsfiddle.net/ve0Laa8f/5/
I try to connect a div to my centre div but I can't figure it out. The "connecting div" should be adjacent to the centered div, but the alignment of the centre div should not change. (It should stay in the centre.)
HTML
<div class="yelow"></div>
<div class="red"></div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin-left:auto;
margin-right:auto;
}
.yelow{
float: left;
width:100px;
background-color:#ffff00;
height:100px;
}
Here's the fiddle:
http://tinyurl.com/k2twodz
So the yellow div should be adjacent to the red centre div.
Thanks in advance!
Here you go. I also adjusted the HTML code.
http://jsfiddle.net/hrvvvz4v/4/
HTML
<div class="red">
<div class="yelow"></div>
</div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin:0 auto;
}
.yelow{
position:relative;
right:100px;
width:100px;
background-color:#ffff00;
height:100px;
}
You can also try this:
HTML:
<div class="main">
<div class="yellow"></div>
<div class="red"></div>
</div>
CSS:
.main
{
width:200px;
height:100px;
}
.red
{
width:100px;
background-color:#ff0000;
height:100px;
float:left;
}
.yellow
{
float: right;
width:100px;
background-color:#ffff00;
height:100px;
}
I was working on leftbars for my website but they seem to be a little left shifted. I don't know why this happens. I have attached the code.
HTML
<div id="main_element">
<div id="first-child">
<img/><span id="edit">Edit Picture</span>
</div>
<div id="leftbar" align="center">
<div>Left bar 1</div>
<div>Left bar 2</div>
<div>Left bar 3</div>
</div>
</div>
CSS
#main_element{
width:90%;
position:relative;
border:1px solid teal;
}
#first-child{
position:relative;
height:90%;
width:100%;
}
#edit{
position:absolute;
right:6%;
top:4%;
font-size:1em;
}
#main_element #first-child img{
border:1px solid teal;
height:50%;
width:90%;
margin:5%;
background-color:#ccc;
}
#leftbar{
height:40%;
margin:0 1%;
}
#leftbar div{
border:1px solid;
width:100%;
height:25%;
background:#E0E0E0;
text-align:center;
padding:1% 0;
}
I am attaching a demo too. http://jsbin.com/agahuw/2/edit
It is because you have their width at 100% but you have also added a border to them, this means the actual width is 100% + 2px
If you need to have a border on them, don't give them a width - they should fill their container by default (unless you float them)
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;
}