I will have a three child div's in a wrapper, two of them will need to float right and one will always float left(one which has .main class). you can have a look at my HTML structure in the fiddle
My Fiddle Here
HTML:
<div id="wrap">
<div class="child">
This is initiator
</div>
<div class="child">
This is second joinee
</div>
<div class="main child">
This is third joinee
</div>
</div>
CSS:
#wrap{
width:600px;
height:400px;
}
.child:nth-child(even){
background:red;
}
.child:nth-child(odd){
background:green;
}
.child{
height: 200px;
width: 200px;
display: block;
float: right;
clear:right;
text-align: center;
vertical-align: middle;
}
.main{
height: 400px!important;
width: 400px!important;
float:left!important;
clear:none!important;
background:yellow !important;
}
But the Left floated Div always comes down. can some one help me understanding this behaviour.
Note: I don't want to change my HTML structure.
Add the following to the main class in your css file:
.main{
position:absolute;
left:0;
}
Related
I have a scenario like to display 2 Div's should be side by side and 3rd Div should be under 2nd Div. Both 2nd and 3rd Div heights are the same as 1st Div Height. All 3 Div's should be display like the image. Is there anything wrong in the below code?
code
.calendar-div {
float: left;
width: 350px;
height: 800px;
margin-right: 8px;
background-color: green;
}
.list-div {
margin-left: 358px;
height: 500px;
background-color: darkgray;
}
.legend {
clear: both;
margin-left: 358px;
margin-bottom: 500px;
height: 300px;
background-color: coral;
}
<div class="calendar-div"> Calendar</div>
<div class="list-div">List</div>
<div class="legend"> LEGEND</div>
display: flex makes us happy.
You're HTML should be like this.
<div class="wrapper">
<div id="1"></div>
<div class="wrapper_two>
<div id="2"></div>
<div id="3"></div>
</div>
</div>
div 1, 2, 3 must have height.
And css code is like
.wrapper {
display: flex;
}
.wrapper_two {
display: flex;
flex-direction: column;
}
flex sets child elements in one line because it's default direction is row.
So #1 and wrapper_two sets in one line.
wrapper_twop has flex-direction: column;, so it sets child elements in one column.
Tweaking the approach you're taking, just removing clear: both; from .legend seems to do what you want. It does put it right up against the list-div without any space. You could add some top margin to it and reduce the height to make things cleaner.
I've got that in a codepen here: https://codepen.io/jhdoak/pen/abdPGvb
Does this do what you're trying to accomplish?
EDIT: This takes your current approach and tweaks it to meet your needs, but something like flexbox (see this answer) is a more modern approach.
#container{
width:80%;
margin:40px 10%;
background-color:lightgray;
height:auto;
display:flex;
justify-content:space-between;
align-items:center;
}
#left{
width:50%;
height:200px;
background-color:blue;
}
#right{
width:50%;
height:200px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.list-div{
width:100%;
height:100px;
background-color:yellow;
}
.legend{
width:100%;
height:100px;
background-color:red;
}
<div id="container">
<div id="left">
<div class="calendar-div"> Calendar</div>
</div>
<div id="right">
<div class="list-div">List</div>
<div class="legend"> LEGEND</div>
</div>
</div>
Basically I have 2 DIVs. One has a fixed width. Now I want the other one take up the remaining width.
I can only acheive this by putting the float on the fixed-width-div - which for me is the one to the right. But it only works when I swap out the DIVs in my HTML (right one comes first). I don't like having it this way.
So is there any way to get this exact setup, but without having to swap out the DIVs in my HTML?
Here's a JSFiddle for clarification
https://jsfiddle.net/MHeqG/1862/
HTML (When I put the left DIV first the float breaks)
<div id="wrap">
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
CSS
#wrap {
width: 300px;
}
#left {
width: 100%;
background-color:#ff0000;
}
#right {
float: right;
width: 50px;
background-color:#00FF00;
}
You can try and use display:flex;, I think it gets you what you want.
Fiddle
You can make use of CSS calc() function
#wrap {
width: 300px;
}
#left {
width: calc(100% - 50px);
background-color:#ff0000;
}
#right {
float: right;
width: 50px;
background-color:#00FF00;
}
<div id="wrap">
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
Would this work?
https://jsfiddle.net/MHeqG/1864/
CSS:
#wrap {
position:relative;
width: 300px;
}
#left {
margin-right:55px;
background-color:#ff0000;
}
#right {
position:absolute;
top:0;
right:0;
width: 50px;
background-color:#00FF00;
}
HTML:
<div id="wrap">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
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 need 3 column layout, first and 3rd column sizes are variable because there will be image or some variable length text(or another image) but i need middle to fill the rest space with background image, something like this if it would work like i imagine :
HTML:
<div class="left-vp">
<img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">
</div>
<div class="right-vp">
<p>
//some text here or another img
</p>
</div>
CSS
.left-vp {
float: left;
}
.mid-vp {
height: 2px;
background: #FFFFFF url("images/dot.png") repeat-x;
width: 100%;
}
.right-vp {
float: right;
}
Is something like this possible with CSS?
If you have control of the markup, and don't mind making changes, you can use table block styles to accomplish this. It's the only way I know of which will handle all scenarios and resizing.
HTML
<div class="container">
<div>
<div class="col col1">
<div class="nowrap">Column 1</div>
</div>
<div class="col col2 fill center">
<div class="nowrap">Column 2</div>
</div>
<div class="col col3">
<div class="nowrap">Column 3</div>
</div>
</div>
</div>
CSS
.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }
.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }
.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }
In action: http://jsfiddle.net/Vxc3n/1/
A few things to keep in mind:
If your first and 3rd columns contain text, you will need to wrap them in a DIV which has the white-space: no-wrap CSS style
If you have more than 1 fill column, ensure the width total = 100% (eg, 2 columns, use 50%)
You won't be able to shrink the columns beyond the minimum required width
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS
#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px; background-color: blue;}
in action -> http://jsfiddle.net/5xfR9/39/
I'm not sure what your actual requirements are for that central column but if it's just to contain a background as in the question could you not move the background styles to the container itself?
As an expansion on Eriks' jsfiddle: http://jsfiddle.net/5xfR9/46/
HTML
<div id="container" class="clearfix">
<div id="left">some text</div>
<div id="right">some text</div>
</div>
CSS
#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
I've added a clearfix class to make sure the container actually contains the columns so that the background can show through (this is the clearfix class from a version of HTML5 Boilerplate).
You just need to play around with min-width and max-width properties until you get what you want. And it seems to work easiest when you give the columns a max-width as a percentage of the body or a wrap.
Here is a working example i put together:
http://jsfiddle.net/76Ep3/1/
HTML
<div id="wrap">
<div id="left">LEFT content...</div>
<div id="center">CENTER content...</div>
<div id="right">Right content</div>
</div>
CSS
*{margin:0;padding:0;}
body, html{
height:100%;
}
#wrap {
min-width:390px;
height:100%;
}
#left{
float:left;
min-width:100px;
max-width:37%;
margin:0 auto;
background-color:blue;
height:100%;
}
#center {
float:left;
min-width:100px;
max-width:20%;
background-color:red;
height:100%;
}
#right {
float:left;
min-width:100px;
max-width:37%;
background-color:yellow;
height:100%;
}
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.