Why does box B surround box A in the code below? Isn't float left on box A supposed to make them align horizontally?
<div style="width:300px">
<div style="width:45%;margin:5px;float:left;border:1px solid black">
<p>Box A</p>
This is just content for box A.
</div>
<div style="width:45%;margin:5px;border:1px solid red">
<p>Box B</p>
This is just content for box B.
</div>
</div>
http://jsfiddle.net/VCr8y/
By adding float: left to the first div, you are effectively removing it from the page flow, but box B is not removed from the page flow. However, box B cannot have its text running through box A, so it just "surrounds" it, as you see in your JSFiddle. What you should do is float box B as well, and apply a clear afterwards (or another clearfix solution) so that your two divs aren't covered up by divs after it:
<div style="width: 300px;">
<div style="width: 45%; margin: 5px; float: left; border: 1px solid black;">
<p>Box A</p>
This is just content for box A.
</div>
<div style="width: 45%; margin: 5px; float: left; border: 1px solid red;">
<p>Box B</p>
This is just content for box B.
</div>
</div>
<div style="clear: both;"></div>
Here's a JSFiddle. By the way, using classes would probably be helpful.
Related
I have an example on JSFiddle on how I want to solve my issue with flexbox: I want the left column to fit the width accordingly to the content - break a line if the text is too long. Unfortunately it always takes as little space as possible, which results in breaking the layout.
I have a fiddle below, first you see two blocks with how it looks now, below you see 2 blocks how I want it to look like (I've defined fixed width for visual reasons, but I want it to be dynamically with flexbox, obviously).
I'm pretty sure I can do this easily but I can't see the wood for the trees. Any kind of help is highly appreciated :)
.flex {
display: flex;
background: #333;
max-width: 380px;
}
.first {
flex: 0;
background: #666;
}
.second {
flex: 1;
background: #999;
}
<p>How it looks like with my flexbox approach</p>
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<br />
<div class="flex">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr />
<p>How it should look like</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
<div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
<div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
<div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
<div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>
Use white-space:nowrap on the second element so it does not collapse.
.flex {
display: flex;
border: 1px solid green;
}
.first {
background: lightblue;
border: 1px solid grey;
}
.second {
white-space: nowrap;
background: lightgreen
}
.narrow {
width: 50%;
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr/>
<div class="flex narrow">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
I have a 2 row layout, with 1 column in the first row, and three columns in the second row. The text is aligned left in the one column, and the three columns in the second row are all center aligned like so:
What I want to do is to somehow align the text in the one column with the left edge of the first item in the 3 column layout, but I'm not sure if this is possible? (at least not without using js). Is there a simple way to do this using the bootstrap classes?
You can put the top text inside the same container as 'Centered 1', and then move it up using position:absolute. See fiddle: https://jsfiddle.net/avgh4x67/.
HTML:
<div id='above'></div>
<div class='container'>
<div class='row'>
<div class='col-sm-4'>
<div>
Centered 1
<div id='centered-1-aligned'>aligned</div>
</div>
</div>
<div class='col-sm-4'>
<div>Centered 2</div>
</div>
<div class='col-sm-4'>
<div>Centered 3</div>
</div>
</div>
</div>
CSS:
#above {height: 80px; border: solid 3px red; margin-bottom: 10px;}
.col-sm-4 {text-align:center; border: solid 3px red; }
.col-sm-4 > div {display:inline-block;}
#centered-1-aligned {text-align: left; position: absolute; top: -80px;}
I appreciate this maybe a simple question but I cannot find the answer.
I have a div. Inside that div I have 3 columns (made up of divs).
The 1st div has some text in it and the 3rd div had some text in it as well. I want the middle div to take up all the remaining space.
I have played around with absolute,fixed and relative positions.
This is what I mean:
<div id="divheader">
<div style="float: left; width: 85px;">Caption to the left</div>
<div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
<div style="float: left; width: 185px;">caption to the right</div>
</div>
<div id="divpage">
stuff
</div>
<div id="divfooter">
footer stuff
You could float the last div right and not worry about having a div in the middle if you are not using it for any purpose.
<div>
<div style="float: left; width: 85px;">Caption to the left</div>
<div style="float: right; width: 185px;">caption to the right</div>
</div>
You can use the table-cell display for this exact purpose.
HTML:
<div class="divided">
<div style="width: 85px;">Caption to the left</div>
<div>this div has no caption but I want it to take up the remaining space</div>
<div style="width: 185px;">caption to the right</div>
</div>
CSS:
.divided {
display: table;
}
.divided > div {
display: table-cell;
}
jsFiddle Demo
Browser compatibility: Works great with modern browsers.
You can make use of the display table (the advantage of doing it this way is that it will also keep all three columns the same height):
<div style="display:table; width:100%">
<div style="display:table-cell; width: 85px;">Caption to the left</div>
<div style="display:table-cell;">this div has no caption but I want it to take up the remaining space</div>
<div style="display:table-cell; width: 185px;">caption to the right</div>
</div><br />
Or if you want it to be more compatible with older browsers then you can use padding and negative margins:
<div style="padding:0 185px 0 85px">
<div style="float: left; width: 85px; margin-left:-85px;">Caption to the left</div>
<div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
<div style="float: right; width: 185px; margin-right:-185px;">caption to the right</div>
</div>
Example Fiddle
i used many ways to make a flexible height to the divs and the whole page but no way .
what i want to do is :
i have 2 columns in the page after the header (right_side , left_side)
the both left and right sides will contain flexible content .
so i need the height of the both columns be flexible.
also want the right side height depends on the left side because maybe the article will be taller than the right content ..
i tried "height" and "min-height" but no way
this is my code
<html style="min-height: 100%;">
<body style="min-height: 100%; width: 980px; border-right: 2px solid black;
border-left: 1px solid black; margin: 0 auto;">
<div><img src="header.jpg"/></div>
<div id="content" style="min-height: 100%">
<div id="right" style="background: red; float:right; width: 280px; min-height: 100%;">my flexible right content</div>
<div id="left" style="background: blue; float:left; width: 700px; min-height: 100%;">
<p>my flexible article </p>
<p>my flexible article </p>
</div>
</div>
</body>
</html>
Try this: http://jsfiddle.net/mcfarljw/erdH7/
You're going to need to use some divs in divs to get the effect of having one column flexible with another if you want it pure CSS and HTML. You can do something like this for the html format.
<div id="container2">
<div id="container1">
<div id="col1">
</div>
<div id="col2">
</div>
</div>
</div>
I'd highly recommend you move your CSS styling into the head using references to the divs or put them in a seperated linked CSS file altogether.
Based on: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
I have three divs and one main div:
<div id="container" style="width:100%;">
<div id="left" style="width:201px; float:left;">
....
</div>
<div id="centre" style="float:left;">
....
</div>
<div id="right" style="width:135px; float:right;">
....
</div>
</div>
How it is possible to make centre div max width, so that
containerDivWidth = leftDivWidth+ rightDivwidth + centreDivWidth;
This will allow for you to have fixed right and left columns and a flexible center portion:
CSS
<style type="text/css">
#left {
float: left;
width: 201px;
border: 1px solid red;
}
#centre {
display: block;
overflow: auto;
border: 1px solid green;
}
#right {
float: right;
width: 135px;
border: 1px solid blue;
}
</style>
HTML
<div id="container" style="width:100%;">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="centre">Middle</div>
</div>
I believe that what you are trying to achieve is the "Holy Grail" layout.
There is a great List Apart article about this Layout, you should check it:
http://www.alistapart.com/articles/holygrail
What I've previously done, is to set centre to have a left margin of 201px, and a right margin of 135px. Set it to relative positioning (instead of floating it), and then it should fill the entire remaining space in between the left and right columns.
I can't seem to find one of my old code examples, so this is the best I can do at the moment. Hope it helps!
This might help:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
(source: matthewjamestaylor.com)
You cannot mix relative and fixed width which is in my opinion a shortcoming in CSS.
The best you can do is something like:
<div id="container" style="width:100%;">
<div id="left" style="width:20%; float:left;">
....
</div>
<div id="centre" style="width:65%; float:left;">
....
</div>
<div id="right" style="width:15%; float:right;">
....
</div>
</div>
I'll be very happy if I'm wrong.