I've the below HTML.
<div class="cover_in">
<div class="ver_text_box">
<div class="inl_text_top">This is the top one</div>
<div class="inl_text_center">THis is second one</div>
<div class="inl_text_bottom">This is trhird</div>
<div class="inl_text_end">THis is last</div>
</div>
</div>
here when i apply css, there is a vertical box created(and i want this), and here the data inside it is being dispayed like below.
This
is
the
top
one
THis
is
second
one
This
is
trhird
THis
is
last
i want to know if i can get this in the same line, also the box which i created is getting resized as per the page height, which would be good, but the data that should come inside the box goes out of it.
here is the fiddle
please let me know how can i get it done.
Thanks
Just edited my answer, see if it works for you:
HTML
<div class="ver_text_box">
<div class="inl_text_top">This is the top one</div>
<div class="inl_text_center">This is second one</div>
<div class="inl_text_bottom">This is third</div>
<div class="inl_text_end">This is last</div>
</div>
CSS
.ver_text_box {
width: 10%;
height: 100%;
border: 2px solid black;
margin-left: 3.5%;
margin-top: 5%;
margin-bottom: 5%;
font-weight: bold;
white-space: nowrap;
}
.inl_text_top {
display: block;
transform: rotate(90deg);
margin-top:2em;
}
.inl_text_center {
display: block;
transform: rotate(90deg);
margin-top: 10em;
}
.inl_text_bottom {
display: block;
transform: rotate(90deg);
margin-top: 10em;
}
.inl_text_end {
display: block;
transform: rotate(90deg);
margin-top: 10em;
margin-bottom: 5em;
}
Fiddle
Remove the 'transform: rotate(90deg)' from your text div's
Sorry for not understanding properly.
Now the text is vertical and on the same line
HTML
<div class="box">This is the top one</div>
<div class="box">This is second one</div>
<div class="box">This is third</div>
<div class="box">This is last</div>
CSS
.box{
display:inline-block;
border:1px solid black;
padding:10px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
margin-top:10%;
}
http://jsfiddle.net/VOXRAZR/AjYvb/8/
ROTATION
-webkit-transform:rotate(90deg);//for safari and chrome
-moz-transform:rotate(90deg);//for firefox
-ms-transform:rotate(90deg);//for IE
-o-transform:rotate(90deg);//for opera
transform:rotate(90deg);//latest browsers
DISPLAY IN ONE LINE
display:inline-block;
I see the reason of data going off the other box,
I have updated the fiddle here with the fix.
The reason behind this is if the child is display: inline-box then parent should be display:box also the float has its own mind it we do not define width of the div.
Here is my CSS:
.box {
position:relative;
display:inline-block;
border:1px solid black;
float:left;
padding:10px;
text-align:center;
width:100px; height:100px;
margin:10px;
}
.ver_text_box{
display:block;
position:relative;
}
.ver_text_box div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
Also here is my fiddle
Related
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
I am trying to place two divs side by side and using the following CSS for it.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
The HTML is simple, two left and right div in a wrapper div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.
So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.
Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.
I hope there is a fix for that.
Thank you.
EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...
Try a system like this instead:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}
<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>
You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.
This is easy with a flexbox:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Using this CSS for my current site. It works perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
Make both divs like this. This will align both divs side-by-side.
.my-class {
display : inline-flex;
}
Here's my answer for those that are Googling:
CSS:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}
Here's the HTML:
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
You can also use the Grid View its also Responsive its something like this:
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
}
#right {
text-align: right;
grid-column: 4/6;
}
and the HTML should look like this :
<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>
here is a link for more information:
https://www.w3schools.com/css/css_rwd_grid.asp
im quite new but i thougt i could share my little experience
#wrapper{
display: grid;
grid-template-columns: 65% 1fr;
}
#left {
grid-column:1;
overflow: hidden;
border: 2px red solid;
}
#right {
grid-column:2;
overflow: hidden;
border: 2px blue solid;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->
<div style="height:50rem; width:100%; margin: auto;">
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
</div>
margin-right isn't needed though.
I have a box that has 3 divs in it. I made a picture below, the two outside divs I have set widths that I need them to be but the middle div I want to be fluid and fill to what ever the remaining width is.
The code for this will be used on different pages that have different width's so I would like the middle to always adjust based on to fill the remaining width.
The way to do this with out breaking a line is to use display: table-cell. To assure the spacing will work properly you should wrap the divs in a container and set a max-width on the container. Then find the remaining width of the middle box: 65+185 = 250. 800 (my max-width example) - 250 = 550. 550/800 = 68.75%. Set that percentage as the middle box and it will be completely fluid. Box 3 won't break to the next line no matter how small the browser gets.
FIDDLE
CSS
.container{
max-width: 800px
}
.box1{
width: 65px;
height: 50px;
background: black;
display: table-cell;
vertical-align: top;
}
.box2{
width: 68.75%;
height: 50px;
background: green;
display: table-cell;
vertical-align: top;
}
.box3{
width: 185px;
height: 50px;
background: yellow;
display: table-cell;
vertical-align: top;
}
HTML
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
Possible solution:
This is the css
main { width:100% }
left {
display:inline-block;
width: 65px;
height: 291px;
background-color:#0000ff;
}
middle {
position:absolute;
display:inline-block;
background-color:#ffff00;
height: 291px;
margin-right:185px
}
right {
float:right;
height: 291px;
background-color: #ff0000;
width: 185px;
}
And the html:
<div class="main">
<div class="left"></div>
<div class="middle">
blablabla
</div>
<div class="right"></div>
</div>
You can find a working sample here: http://jsfiddle.net/mLJLr/1/
Use this css:
#left {
float:left;
width:65px;
background-color:#ff0000;
}
#center {
float:left;
width:100%;
max-width: initial;
background-color:#00AA00;
}
#right {
float:right;
width: 185px;
background-color:#00FF00;
}
And this Html:
<div id="center">
<div id="left">
left
</div>
center
<div id="right">
right
</div>
</div>
Test Online: http://jsfiddle.net/9PFPm/
I have to implement this content:
<div class="content">
<div class="row">
<div class="cell"> </div>
<div class="cell" id = "up_lft"></div>
<div class="cell" id = "up_rgh"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"> </div>
<div class="cell" id = "dwn_lft"></div>
<div class="cell" id = "dwn_rgh"></div>
<div class="cell"> </div>
</div>
</div>
and the CSS
.content{
display: table;
margin-top:22px;
width:100%;
}
.row {
display: table-row;
width:100%;
}
.cell {
display: table-cell;
width:auto;
vertical-align:top;
}
#up_lft{
width:100px;
min-width:100px;
height:125px;
background-color:#8E9090;
outline: 1px solid white;
}
#up_rgh{
width:100px;
min-width:100px;
height:125px;
background-color:#8E9090;
outline: 1px solid white;
}
#dwn_lft{
width:100px;
min-width:100px;
height:125px;
background-color: #394249;
outline: 1px solid white;
}
#dwn_rgh{
width:100px;
min-width:100px;
height:125px;
background-color:#872434;
outline: 1px solid white;
}
on fiddle here:
http://jsfiddle.net/reJ7e/
I choose css display:table only because i need those boxes to stay on the center of the page no matter of screen resolution. I also need to add something after the bottom right div (a small height div that extends itself to the margin right screen and having a background image)
The problem is that if i try to put anything else but in that div, all design is moving to the left. messy.
Any suggestions please? I am open to change the css display: table - but i don't know how to do it (all 4 boxes stay center)
Note that i also have a header with a menu having the same width above those boxex
Thanks
You can avoid display table and use position: absolute and also transforming the origin point of the element to make it exactly in the middle of the page:
position: absolute;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
top: 50%;
left: 50%;
Any element given this style will stay at the center of the page.. if you want it to stay at the center of the window just change from position: absolute to position: fixed.
Here's an illustration fiddle
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
I am trying to place two divs side by side and using the following CSS for it.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
The HTML is simple, two left and right div in a wrapper div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.
So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.
Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.
I hope there is a fix for that.
Thank you.
EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...
Try a system like this instead:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}
<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>
You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.
This is easy with a flexbox:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Using this CSS for my current site. It works perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
Make both divs like this. This will align both divs side-by-side.
.my-class {
display : inline-flex;
}
Here's my answer for those that are Googling:
CSS:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}
Here's the HTML:
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
You can also use the Grid View its also Responsive its something like this:
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
}
#right {
text-align: right;
grid-column: 4/6;
}
and the HTML should look like this :
<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>
here is a link for more information:
https://www.w3schools.com/css/css_rwd_grid.asp
im quite new but i thougt i could share my little experience
#wrapper{
display: grid;
grid-template-columns: 65% 1fr;
}
#left {
grid-column:1;
overflow: hidden;
border: 2px red solid;
}
#right {
grid-column:2;
overflow: hidden;
border: 2px blue solid;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->
<div style="height:50rem; width:100%; margin: auto;">
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
</div>
margin-right isn't needed though.
I'm trying to place some divs, with this rule: Fill first column where possible, then (when first column is full) fill the second column, etc. (Please see the image below)
This is what I want to have: (created with Paint!)
In the image above, as you can see, first column has 1,2,3,4 and there is not enough vertical space to put 5 in the first column. So 5 should be placed on the second column...
I've tried to create something like the image above using float:left, but this is the result:
How to create something like the first image? What's wrong with my current code (which creates the second image)?
This is my HTML code:
<div class="container">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
<div class="i2">5</div>
<div class="i3">6</div>
<div class="i1">7</div>
<div class="i1">8</div>
</div>
And this is my CSS:
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
position:absolute;
}
.i1,.i2,.i3 {
float:left;
width:100px;
background:lime;
border-radius: 20px;
text-align:center;
}
.i1 {
height:33px;
}
.i2 {
height:66px;
}
.i3 {
height:100px;
}
Fiddle of my code
just modern tablets and smartphones should show it correctly
In that case, use CSS3 columns. The browser support should be good enough.
http://jsfiddle.net/thirtydot/AQ7bp/4/
.container {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
}
.i1,.i2,.i3 {
display: inline-block;
vertical-align: top;
}
You will have to separate the columns into extra divs. Float left aligns elements horizontally, so they will behave like words in a sentence. Wrapping each section of divs and floating the wrapper left creates the effect you desire, but only in this specific case. If this is to be more dynamic, you might have to re-think your design.
HTML:
<div class="container">
<div class="wrap">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
</div>
<div class="wrap">
<div class="i2">5</div>
<div class="i3">6</div>
</div>
<div class="wrap">
<div class="i1">7</div>
<div class="i1">8</div>
</div>
</div>
CSS:
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
position:absolute;
}
.wrap
{
float: left;
width: 102px;
}
.i1,.i2,.i3 {
width:100px;
background: #000;
border-radius: 20px;
text-align:center;
color: #fff;
}
.i1 {
height:33px;
}
.i2 {
height:66px;
}
.i3 {
height:100px;
}
http://jsfiddle.net/Kyle_Sevenoaks/PyT5w/ (I changed the colors because they hurt my eyes.)
After some clarifications on the question, if this is to be dynamically populated with shifting heights then there is no solution that doesn't use some crazy Javascript. You'll have to come up with another design.
You can probably make it work with flexbox. I'm not sure about the support in iOS browsers but newer webkit browsers do support it so it might be worth a look.
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
display: -webkit-flex;
-webkit-flex-flow: column wrap;
}