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>
Related
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;
}
I want to make 3 divs(left, middle, right) in one line, the left and right divs with fixed width, while the middle one with expanding width(with percent use).
So far I tried couple of variants, but nothing do the job.
I want it something like that:
[...150px...][...100%...][...150px...]
While at the middle I'll be able to put a text that will brake line normally(without inline).
Sorry for my bad english.
I need it as much as possible adaptable for cross-browsering.
You can do like this:
.div1{
width: 150px;
float: left;
}
.div2{
width: 150px;
float: right;
}
.middiv{
width: calc(100% - 300px);
margin: 0 auto;
}
But I would recommend you to use width for middiv by calculating yourself. For eg:
If the parent div width is 1000px then your middiv would be 1000 - 300 = 700px
This should work:
HTML:
<div class="table">
<div class="row">
<div class="fixedCell"></div>
<div class="cell"></div>
<div class="fixedCell"></div>
</div>
</div>
CSS:
.table{
width:100%;
height:20px;
display:table;
}
.row{
display:table-row;
}
.fixedCell {
width:150px;
display:table-cell;
background-color:red;
}
.cell{
display: table-cell;
background-color:green;
}
http://jsfiddle.net/yxt3gu11/
I would position the left and right parts absolutely and give the center a horizontal margin of 150px.
<div class="row">
<div class="left">left</div>
<div class="center">centered text</div>
<div class="right">right</div>
</div>
.row {
position: relative;
}
.left,
.right {
width: 150px;
background-color: #f99;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
margin: 0 150px;
}
Or see http://codepen.io/ckuijjer/pen/Fygow . If the left and right parts might have more content, add a clearfix to the row.
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'm trying to align a few divs into this structure but nothing is working.
<div>
<div>top</div>
<div>middle
<div>left</div> <div>right</div>
</div>
<div>bottom</div>
</div>
Ive tried using floats with abosolutes, blocks, etc closest im getting is with block-inline but the div which i need aligned right just sits up close to the left div,ived add text-align right with no joy.
Many Thanks
D
try this
<div>
<div>top</div>
<div>
<div style="float:left;">left</div>
<div style="float:left;">right</div>
</div>
<div style="clear:both;">bottom</div>
</div>
the bottom div with clear:both is probably not enough but does the trick in this particular example
google clearfix for this
Give the left and right div a width and let them float
Make sure you also clear the float by adding an extra div below with: clear: both;
Code:
<div id="wrap">
<div id="top">top</div>
<div id="mid">
<div id="left">left</div>
<div id="right">right</div>
<div class="clear"></div>
</div>
<div id="bot">bottom</div>
</div>
CSS:
div {
background: #ccc;
height: 15px;
margin-bottom: 10px;
}
.clear {
clear: both;
}
#wrap {
width: 400px;
}
#top {
}
#mid {
}
#left {
float: left;
width: 200px;
}
#right {
float: left;
width: 200px;
}
#bot {
}
See code in action: http://jsfiddle.net/GZg6y/
you can do this in different ways, one through float css property, make sure you specify the width as in this example:
<div class="container">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div> <div class="right">right</div>
</div>
<div class="bottom">bottom</div>
and your css should look like this:
.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}
see here http://jsfiddle.net/M3met/1/
I am quite new to css and html, and I am having trouble floating divs within a another div,
I've done quite a bit of research online but have not been able to come up with a solution.
these are the sites I have read and where of no use:
barelyfitz /screencast/html-training/css/positioning/
stackoverflow /questions/580195/css-layout-2-column-fixed-fluid
mirificampress /show.php?id=106
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
My code can be found on jsFiddle here
I hope this will help.
CSS:
#left, #right {
width: 100px; //change this to whatever required
float: left;
}
HTML :
<div id="wrapper">
<div id="left">
<p class="t0">lorum itsum left</p>
<div>
<div id="right">
<p class="t0">lorum itsum right</p>
<div>
<div>
Like this?
http://jsfiddle.net/Ev474/
<div id="wrapper">
<div id="inner">
<div id="left">
Left Content
</div>
<div id="right">
Right Content
</div>
</div>
</div>
div {
height: 50px;
}
#wrapper {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
background-color: #ccc;
}
#inner {
width: 400px;
}
#left {
width: 150px;
float: left;
background-color: #f00;
}
#right {
width: 150px;
float: left;
background-color: #0f0;
}
Since you are a beginner. I will make it straight forward. Below is extraction of your code. I used internal style sheet. Your example you are using external style sheet.
Using float attribute you can set it to left and right. Here is used float:left to alight one div to left and float:right to alight other one to the right.
Each opened tag has to be closed tag.
<head>
</head>
<!--Internal style sheet-->
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div id="wrapper" >
<div class="left">
<p class="t0">lorum itsum left</p>
</div>
<div class="right">
<p class="t0">lorum itsum right</p>
</div>
</div>
</body>
</html>
Additional note: If you want to adjust the size of left and right div then use width in style sheet. Refer the updated style sheet below. I made left div width to 80% of the screen width and right width to 20%.(total should be 100%). Adjust accordingly.Background color used to set the background color of the div.
.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}