I have two divs side by side. I want div that is on left hand side to take up as much room as it needs without pushing the other div (on right) to next line.
Here is what I have right now: http://jsfiddle.net/RALza/
HTML
<div id="container">
<div id="divA"> left text </div>
<div id="divB"> right text </div>
</div>
CSS
#divA
{
float:left;
border:1px solid blue;
width:100%;
}
#divB
{
float:right;
border:1px solid red;
}
<div id="container">
<div id="divB"> right text </div>
<div id="divA"> left text </div>
</div>
#divA
{
overflow:auto;
border:1px solid blue;
}
#divB
{
float:right;
border:1px solid red;
}
will work.
But you should specify width of floating elements.
You can use CSS flexible boxes:
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div id="divA">left text</div>
<div id="divB">right text</div>
</div>
Try this fiddle: http://jsfiddle.net/RALza/6/
It works by changing the order of the two divs and making the first div a normal block element without a float.
<div id="container">
<div id="divB"> right text </div>
<div id="divA"> left text </div>
</div>
and
#divA
{
border:1px solid blue;
}
#divB
{
float:right;
border:1px solid red;
}
Related
I'm trying to use CSS Grid to have a div that starts in the middle of the div in the row above. I want both divs to wrap around the text. This is what I'm trying to achieve:
As you see on the picture, in some cases, the subtitle might be longer than the title, and sometimes not.
I tried different ways but I can't figure it out. Here's my last attempt. The problem here is that (of course) the "Title" div becomes wider as the subtitle is longer.
#container{
border:solid black;
display:grid;
grid-template-columns: max-content auto;
grid-template-rows:1fr 1fr;
}
#title{
border:solid blue;
grid-column:1/2;
grid-row:1/2;
}
#subtitle-container{
border:solid red;
grid-column:1/2;
grid-row:2/3;
display:grid;
grid-template-columns:50% max-content;
}
#subtitle-text{
border:solid green;
grid-column:2/3;
}
<div id="container">
<div id="title">Title</div>
<div id="subtitle-container">
<div id="subtitle-text">This is a rather long subtitle
</div>
</div>
</div>
Here is an idea where you can create a hidden float element that will push the subtitle. You simply make the float element 50% width of the title and you need to make the width of the title fit-content.
.container{
border:solid black;
margin:5px;
}
.title{
border-bottom:solid blue;
width:-moz-fit-content;
width: fit-content;
}
.title:after {
content:"";
float:left;
width:50%;
height:2px; /*not needed*/
background: red; /*not needed*/
margin-top:10px; /*need to be a small value*/
}
.subtitle-text{
border:solid green;
display:inline-block;
}
<div class="container">
<div class="title">Title</div>
<div class="subtitle-text">This is a rather long subtitle</div>
</div>
<div class="container">
<div class="title">Long long Title</div>
<div class="subtitle-text">Subtitle</div>
</div>
<div class="container">
<div class="title">Very Long long Title</div>
<div class="subtitle-text">Subtitle</div>
</div>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
I've looked at so many posts on this I'm at a loss as to why its not working for me.
.firstCell
{
float:left;
width:40%;
text-align:right;
align:right;
border:1px solid white;
}
.cell
{
float:left;
width:auto;
align:left;
text-align:left;
border:1px solid white;
}
.newRow
{
clear:both;
width:100%;
}
.container
{
width:100%;
background-color:#DEEFF8;
margin:0px auto;
}
So, I basically have this:
<div class="container">
*Within this I have sections of like a form*
<div style="width:400px;border:1px solid black;">
<div class='firstCell'>File Name:</div>
<div class='cell'><html:text property="fileName" /></div>
<div class='cell' style='color:red;'>(Max 50 character)</div>
<div class='newRow'></div>
<div class='firstCell'>Copy Book Name:</div>
<div class='cell'><html:text property="copyBookName"/></div>
<div class='newRow'></div>
<div class='firstCell'><html:button property="populateFields" value="Populate Fields" onclick="showFields();"/></div>
<div class='newRow'></div>
<div class='newRow'></div>
</div>
*So this is one section, what I would like to happen is to position my form elements in this and then have it all be centered on the main div
</div>
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? http://jsfiddle.net/36ujG/
It's a little hard to understand what you are trying to center. All I did was added margin: 0 auto to the child div of container.
I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.
Here's a picture to demonstrate what it looks like now:
The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.
Thanks!
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:auto;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
Since display:table-cell is now universally supported in all modern browsers you might as well use that: http://jsfiddle.net/Lbpeh/1/
HTML
<div id="root">
<div id="left">
Left
</div>
<div id="middle">
Middle
</div>
<div id="right">
Right
</div>
</div>
CSS
#root {
display:table;
border-spacing:0;
width:100%;
height:500px;
}
#root > div {
display:table-cell;
}
#left {
background:red;
width:25%;
}
#middle {
background:green;
}
#right {
background:blue;
width:100px;
}
Keep in mind that table-like layout has some issues of its own, but what you're essentially trying to achieve is the behaviour of tables with semantically more correct markup. That's what display:table-cell is for.
There are quite a few:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
http://www.tjkdesign.com/articles/3cols.asp
http://www.alistapart.com/articles/holygrail
3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)