I'm trying to put two fixed width divs and one fluid width div in one row of col-12-xs. I want this fluid div to fill out whole space left, but with min-width (for example 600px).
I did something like this:
<div class="container">
<div class="row">
<div class="col-12-xs">
<div class="event">
<div class="date">
</div>
<div class="flyer">
</div>
<div class="info">
</div>
</div>
</div>
</div>
</div>
.date, .flyer, .info {
float: left;
border: 1px solid black;
height:100px;
}
.date, .flyer {
width: 100px;
}
.info {
min-width: 600px;
}
It works fine, but when I decrease window size this .info div moves to next row, which is not what I want.
How can I fix this?
http://www.bootply.com/stF3byJ56I#
Remove float:left for .info
.date, .flyer, .info {
border: 1px solid black;
height:100px;
}
.date, .flyer {
width: 100px;
float:left;
}
.info {
min-width:600px;
}
Related
I want that yellow box to fill all the available space both vertically and horizontally without overlaying the picture.
(I'm trying to do it without using table properties)
Any ideas?
This is how it looks now:
and this is what i want:
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
float:left;
background-color: red;
padding:2%;
}
.content-block-image{
background-color: greenyellow;
float: right;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image"> <img src="image-1.jpg"> </div>
</div>
The problem is the float: left makes the yellow area not "stretch." To make the image float to the right of the text, it has to come before the text. So we change the order of the content blocks:
<div class="content-block-body">
<div class="content-block-image"> <img src="image-1.jpg"> </div>
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
</div>
And then adjust the css:
.content-block-body {
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
/*float:left;*/ /* this we remove */
background-color: red;
padding:2%;
/* this we add: */
overflow: auto;
}
.content-block-image{
background-color: greenyellow;
float: right;
}
Note that whenever you float things you'll most likely need to add what's called a "clearfix". In this case, apply the clearfix to the .content-block-body to make it extend vertically to fit the floated element http://nicolasgallagher.com/micro-clearfix-hack/
You have to specify width of left block and right block in CSS and make image width 100%
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
float:left;
background-color: yellow;
padding:2%;
width:56%;
}
.content-block-image{
background-color: greenyellow;
float: right;
min-width:200px;
width:40%;
}
.content-block-image img{
width:100%;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image"> <img src="image-1.jpg"> </div>
</div>
You can use css3 flex. That's the only thing that works just fine when it comes to getting the height of the parent node for child node. All the hacks for old browsers doesn't work always.
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
display: flex;
clear: both;
}
.content-block-text{
float:left;
background-color: red;
align-items: stretch;
}
.content-block-image{
flex: 1;
background-color: greenyellow;
}
.content-block-image img{
float: right;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image">
<img src="//placehold.it/250x250">
</div>
</div>
also check out this cool site for code snippets on centering in css.
This is sort of hard to explain so I made a fiddle:
https://jsfiddle.net/8wujkpqb/
I have a right floating div with a max-width set. I need the div inside of that to take up 100% of the max-width so the content can be left-aligned to the content in the div below.
<div class="container">
<div class="mainleft">
<div class="outer-red">
<div class="first">
I need this<br/> pushed to the left<br/> to align with the<br/> lower text but still<br/> be in a "max-width"<br/> container floating right.
</div>
<div class="clear"></div>
</div>
<div class="outer-gray">
<div class="second">
this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width
</div>
<div class="clear"></div>
</div>
</div>
<div class="mainright">
<div class="right-content">
content
</div>
</div>
<div class="clear"></div>
CSS
.container {
width: 100%;
}
.mainleft {
width: 50%;
float: left;
}
.mainright {
width: 50%;
float: left;
}
.outer-red {
width:100%;
background: red;
padding: 40px;
box-sizing:border-box;
}
.outer-gray {
width:100%;
background: gray;
padding: 40px;
box-sizing:border-box;
}
.first {
float: right;
max-width:250px;
clear:both;
}
.second {
float: right;
max-width:250px;
}
.right-content {
width:100%;
background: blue;
padding: 40px;
box-sizing:border-box;
}
.clear {
clear: both;
}
https://jsfiddle.net/8wujkpqb/
Any help is greatly appreciated!
Just add another div into your "first" container that possesses the max-width and let the parent be the size that is necessary to align the inner container left. Like so
.first {
float: right;
max-width: 100%;
clear:both;
width: 200px
}
.inner {
max-width: 200px
}
https://jsfiddle.net/8wujkpqb/1/
I have two divs that I've placed inside another div:
<div id="outer_div">
<div id="left_div">
<!-- Buttons and text field -->
</div>
<div id="right_div">
<!-- Buttons and drop list -->
</div>
</div>
My style sheet includes the following:
#left_div {
float:left;
}
#right_div {
float:right;
}
Now, when I do this, I expect that the left and right div will be on the left and right of the screen, respectively, and that they will be aligned horizontally as well. The first holds true, however, the second hope is not true. If I put left_div above right_div, the right_div buttons and drop list are on a line below the left_div. If I put right_div above left_div, the divs are almost in line, but the right div is slightly elevated, so that it overlaps a div that is above it.
Try setting a width to your outer_div
#outer_div {
width: 100%; //or whatever width you would like it to be
}
#left_div, #right_div {
width: 50%;
}
here is a sample that works fine for me.
<div id="outer_div">
<div id="left_div">
<div class="button"></div>
<div class="button"></div>
</div>
<div id="right_div">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
and css
#outer_div
{
overflow: hidden;
width: 450px;
background: yellow;
}
#left_div {
float:left;
width:200px;
height: 200px;
border: thin red solid;
}
#right_div {
float:right;
width:200px;
height: 200px;
border: thin blue solid;
}
.button {
width: 75px;
height: 25px;
margin: 5px;
border: thin green solid;
}
and the fiddle: http://jsfiddle.net/cMhpK/
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
I want to place divs next to each other. I dont't know number of divs, since this is dynamically created and changed. I would like to have one parent div which will have scrollbar in case there are many child divs (and their width is greater than parent).
Here's the jsFiddle example. So, basically I would like to have all this three columns, next to each other and with scrollbar on the bottom of parent div.
HTML:
<div class="content">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
CSS:
content {
width: 100px;
background- color: #355E95;
overflow: visible;
}
.column {
width: 50px;
display: inline-block;
}
Add white-space:nowrap to your parent div.
FIDDLE
You would need to use a content div for the scroll and then a wrapper for the columns, adjusting the width of the wrapper to fit all 3 of your columns (150px in your example).
The column structure is made by floating div's left, but it will float to the width of your parent container, in this case your parent container is only 100px so we need to add a wrapper for them to fit inside.
If you also want a vertical scroll you will need to set a height to your container.
Jsfiddle: http://jsfiddle.net/tYnH3/
css:
.content {
width: 100px;
background-color: #355E95;
overflow: auto;
}
.content-wrapper {
width: 150px;
}
.column {
width: 50px;
float: left;
}
html:
<div class="content">
<div class="content-wrapper">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/bdssw/
use float:left;
.column {
width: 50px;
display: inline-block;
float:left;
}
Try the following JS fiddle
http://jsfiddle.net/jT6SW/1/
#wrapper
{
float: left;
height: 150px;
width: 250px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
use width:auto;
.content {
width: auto;
background-color: #355E95;
overflow:scrolling;
position:fixed;
}
.column {
width: 50px;
float:left;
}
http://jsfiddle.net/XqSJG/6/