Fiddle: http://jsfiddle.net/y8d2q3ww/2/
.flex-container{display:flex;width:100%}
.square{flex-basis:55px;background:yellow}
<div class='flex-container'>
<div class="square">M</div>
<div class="text">some text some text some text some text some text some text some text some text </div>
</div>
Only when the text doesn't wrap, the .square's width will be 55px as the flex-basis property sets; but if the text is more than one line, the actual width will be scaled down. So what is behind this? And how do I make the .square area have a fixed width(be it px or %) no matter what content the other flex items hold?
.square shrinks if .text overflows, because you did not specify flex-shrink, which defaults to 1.
Set it to 0 to get the desired result:
.flex-container {
display: flex;
width: 100%
}
.square {
flex-basis: 20%;
flex-shrink: 0;
background: yellow
}
<div class='flex-container'>
<div class="square">M</div>
<div class="text">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text</div>
</div>
Related
Is it possible to define a CSS grid, with auto-rows (a dynamic number thereof) which size to a container based only on the number of them, i.e. filling the available vertical space - and then containing any content within that vertical space.
See below, the left hand side shows the equal row height sizes assigned when the content does not cause the rows to grow.
On the right is the problem - long text causes the heights to then become unequal.
The code is at this pen:
https://codepen.io/jamesharcourt/pen/GRBdRWo
In the image above, I want the sizes to remain as per the left and the text to essentially not be visible / overflow to be hidden.
Sample css:
.columns {
display: flex;
}
.content-area {
height: 300px;
width: 500px;
display: grid;
grid-auto-rows: 1fr;
background: pink;
}
.item {
margin: 2px;
background: gray;
}
Sample HTML:
<div class="columns">
<div class="content-area">
<div class="item">1 short text</div>
<div class="item">2 short text</div>
<div class="item">3 short text</div>
<div class="item">4 short text</div>
</div>
<div class="content-area">
<div class="item">1 short text</div>
<div class="item">2 short text</div>
<div class="item">3 short text</div>
<div class="item">4 long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
</div>
</div>
Here is how you can do it :
.item {
margin: 2px;
background: gray;
height:150px;
overflow-y: auto;
}
CSS and responsiveness in multiple columns with fixed and scaleable elements can be done many ways.
I have created a solution that seems to work, though I have no idea whether this is best practice. Really would appreciate the Stack Overflow community looking at it and providing some feedback.
Fiddle:
http://jsfiddle.net/brandrally/ZDt6N/
CSS
html, body { margin:0 auto; padding:0; background: #fff; text-align: center; }
/* Clearfix
============================================================================ */
.CF { display:inline-block;overflow:hidden; }
/* IE mac \*/
.CF { display:block; }
/* Elements
============================================================================ */
div#container {max-width: 1140px; min-width: 960px; margin:0 auto; margin-top: 10px; padding:0; background:#0F9; position:relative;}
div#left-menu {width: 100px; background:#F30; position: absolute; top:0; left:0; }
div#information {padding: 10px 10px 25px 10px; background:#39C; margin-left:100px;}
div#information-wrapper {position:relative; background:#3FF; }
div#information-left-menu {width: 125px; background:#C30; position: absolute; top: 0; left:0;}
div#content {background:#FC0; margin-left: 125px; text-align:left;}
HTML
<div id="container" class="CF" >
<!-- This is fixed Width -->
<div id="left-menu">
<p>Left 100px wide </p>
</div>
<!-- Width scales to size of Container -->
<div id="information" class="CF">
<div id="information-wrapper">
<div id="information-left-menu">Fixed width of 125px </div>
<div id="content">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
</div><!-- / END / Container / -->
I've managed to align side by side the DIV containing the image, and the DIV containing the text, side by side, by applying float:left to the image DIV.
But when I Include these two DIVs in a parent DIV, and duplicate the parent and try to align the parents side by side by applying float:left to the first parent, it doesn't work.
Here's my code:
<div style="width:350px;min-height: 200px; float:left;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
and fiddle.
I also wonder whether the rest of the code is best practice, such as padding-left:135px - would it be better to use relative padding from the image, rather than the parent div? if so, what's the easiest way to change that?
You have the float:left outside of the style attribute, try moving that inside the speech marks and applying float: left to both parent divs.
Updated Fiddle
You can simply change your code to the below, giving each div a display:inline-block; then as long as your browser window is greater than the sum of the two div widths, they will display inline, no need for floats:
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;">
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;"/>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"/>
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
That said I would strongly recommend you separate your CSS from your HTML in order to make a clear distinction between content and presentation and capture the clear benefits that offers.
You had one of your float: left attributes outside of the style tag. Also, you should use CSS classes instead of putting all of your CSS styles inline. It makes your code much neater and prevents a lot of duplicated styling. Here is an updated Fiddle.
HTML
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
CSS
.parent {
width:350px;
min-height: 200px;
float:left;
}
.title {
font-size:15pt;
color:red;
letter-spacing:-.04em;
padding-top:2px;
padding-left:135px;
}
.text {
font-size:11pt;
color:black;
letter-spacing:-.02em;
margin-top:4px;
padding-left:135px;
}
.image-wrap {
float: left;
}
.image {
border: 1px solid black;
padding:1px;
}
I have a liquid layout page that has a max and min width of the body set (1260px and 960px, respectively). I have a left-hand sidebar that takes up the left 25% and the content which takes up the right 75% of the screen. Within the content I have placed two div containers with fixed width pictures in them (300px x 225px) with some text below each.
What I would like to do is to have those div boxes remain their own static width (300px as determined by the width of the picture above the text) but to be able to remain, for argument's sake, 50px apart inline and always in the center (bar the 50px apart) despite what browser I have them in (either the 1260 or 960px, or somewhere inbetween). The reason that I would like this is that if I use margin to separate them they only look 'centered' (again, bar the 50px in between them) in one browser width and aren't liquid in their layout.
JSFiddle: http://jsfiddle.net/fpN5t/1/
Please let me know if I'm not explaining myself very well!
Thank you so much in advance.
<div id="content">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<h1 class="first-content-heading">Heading 1</h1>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h2>Heading 2</h2>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h3>Heading 3</h3>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
</div>
#content {
width: 75%;
float: left;
margin: 0;
background: #FFF;
}
#upper-left-box {
width: 300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.first-content-heading {
clear: both;
}
You can center the upper boxes by putting a container around them with margin auto. Then you can place a 50px margin in between the boxes for the effect you are looking for"
http://jsfiddle.net/fpN5t/2/
<div class="upper-boxes">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
</div>
.upper-boxes{ width: 650px; margin: 0 auto; }
#upper-left-box {
width: 300px;
margin:0 50px 0 0;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
position: relative;
text-align: center;
float: left;
}
Hopefully I understood the problem correctly, if not please indicate.
I would like to do this using CSS:
Ssing only ul li, and a elements. The red bullets would be invisible.
How can I do this? I've tried using float:left for the horizontal outer bullet list and a normal vertical bullet list for the inner one, but it did not works.
Is there a better way than bullet list?
I'm just going to throw this out there as a viable solution. Why not use div elements? Here's an example:
CSS --
.container {
width : 400px;
margin : 0;
padding : 0;
}
.col {
display : inline-block;
width : 100px;
vertical-align : top;
}
.col.double {
width : 200px;
}
HTML --
<div class="container">
<div class="row">
<div class="col">9</div>
<div class="col">0</div>
<div class="col">TITLE</div>
</div>
<div class="row">
<div class="col double">{image}</div>
<div class="col">text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
Here is a demo: http://jsfiddle.net/a9m76/1/