I have 3 divs that I would like to display inline.
2 divs on the left and 1 div on the right most on the screen.
When screen shrinks or the name size increases I want all elements to still stay inline and name to wrap on the new line if it is hitting the right div. Right div has to always be on the right. I would like to avoid using set width/height except for the images.
I cant seem to be able to this correctly.
Also Right div seems to be splitting and not staying inline no matter what I do or even disappearing.
So expected result is: div 1&2 always left, div 3 always right and all three always inline when screen width changes
Here is my html:
<div class="main">
<div class="one">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="image">
</div>
<div class="two">
<span class="name">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
<span class="title">Title</span>
</div>
<div class="three">
<div class="this">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="this-image">
<span class="this-num">12</span>
</div>
<div class="that">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="that-image">
<span class="that-num">21</span>
</div>
</div>
</div>
this is my css:
.main {
display: -webkit-inline-box;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.three {
float:right;
position: fixed;
}
.one {
background-color: red;
}
.two {
background-color: green;
margin-left: 15px;
}
.three {
background-color: blue;
}
here is my jsfiddle:
http://jsfiddle.net/r679f840/1/
Thanks
.one with float left, .with margin-right (no float) .three with absolute and no float
.main {
position: relative;
}
.one {
background-color: red;
float:left;
margin-right:15px;
margin-bottom:15px;
}
.two {
background-color: green;
margin-right: 46px;
}
.three {
background-color: blue;
position: absolute;
right: 10px;
top: 0;
}
see fiddle here
try this:
.main {
display:table;
width:100%;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.one, .two, .three {
display:table-cell;
width:30%;
margin:0 1%;
}
.one {
background-color: red;
}
.two {
background-color: green;
margin-left: 15px;
}
.three {
background-color: blue;
}
see fiddle here
Similar answer than Fabio with display : table; as a basis.
Difference is to leave a gap in between second and third cell untill there is enough content to fill it.
DEMO
.main {
display: table;
width:100%;
overflow:hidden;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.one, .two, .three {
display:table-cell;
vertical-align:middle;
}
.one {
background-color: red;
}
.two {
background-color: green;
display:inline-table;
}
.two:after {/* here is the faux-columns revisited to draw your background if needed */
content:'';
display:block;
height:1000px;
margin-bottom:-1000px;
background:green;
}
.three {
background-color: blue;
}
Found solution to my own question myself, but #Barak your answer was almost perfect so I'll keep your answer as the correct.
Here is my jsfiddle: http://jsfiddle.net/r679f840/8/
And here is my CSS:
.main {
display: flex;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.one {
background-color: red;
float:left;
}
.two {
background-color: green;
margin-left: 30px;
padding-right: 60px;
float: left;
width: 100%;
}
.three {
background-color: blue;
float:left;
width: 50px;
}
Related
I have a container around two inline block elements. However the container collapses (the horizontal dashed line). How do I stop it from collapsing so that I can apply a background colour to the container. The structure is important and I want to avoid using flex-box. It is also important that the two coloured squares are right aligned and next to each other.
The aim is to create an absolutley positioned block element over a canvas element. With a descriptive name on the left and two buttons on the right. I have to work with what is there so a solution that involves as little change as possible would be great.
.header3 {
width: 300px;
background-color: lightgray;
border: 1px dashed grey;
position:relative;
}
.title3{
position:absolute;
top:0px;
left:0px;
display:inline-block;
vertical-align:center;
background-color:#bada55;
}
.list {
list-style:none;
margin:0px;
padding:0px;
border:1px dashed green;
position:absolute;
display:inline-block;
top:0px;
right:0px;
}
.item {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.item-1 {
background-color: orangered;
}
.item-2 {
background-color: skyblue;
}
<body>
<br>
<div class="header3">
<div class="title3">bollard name</div>
<ul class="list">
<li class="item item-1"></li>
<li class="item item-2"></li>
</ul>
</div>
</body>
Codepen here
This is happening because you absolutely positioned your .title3 and .list elements which remove them from the normal flow.
If you want to achieve this layout use float:right on your ul and insert a clear in your div (in the code below I achieved this using the::after:pseudo element of yourdiv`)
* {
font-family: "Helvetica";
}
/* list */
.header3 {
width: 300px;
background-color: lightgray;
border: 1px dashed grey;
position:relative;
}
.header3::after {
content: '';
display: table;
clear: both;
}
.title3{
display:inline-block;
vertical-align:center;
background-color:#bada55;
}
.list {
list-style:none;
margin:0px;
padding:0px;
border:1px dashed green;
float: right;
}
.item {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.item-1 {
background-color: orangered;
}
.item-2 {
background-color: skyblue;
}
<div class="header3">
<div class="title3">bollard name</div>
<ul class="list">
<li class="item item-1"></li>
<li class="item item-2"></li>
</ul>
</div>
I'm playing around with properties of CSS elements and wrote this code:
body {
font-family: "Helvetica";
}
.parent {
background-color: yellow;
overflow: auto;
padding-bottom: 20px;
display: inline-block;
}
.col {
height: 200px;
padding: 20px 10px;
float:left;
margin: 10px 10px;
}
.red {
background-color: red;
}
.green {
background-color: #00ff00;
}
.blue {
background-color: #0000ff;
color: white;
}
p:hover {
background-color: #ffff00;
}
Why is it that when I run the result and resize the screen to the point where the blue float clears to the next line, the yellow outline of the parent div doesn't resize to fit the width?
I apologize if that is confusing. Here is a visual example of what I mean:
https://www.dropbox.com/s/9r7mhizfqdbyflh/Screenshot%202014-12-24%2001.02.36.png?dl=0
Why is there the yellow space left over despite it being inline-block? Is it because float keeps reserved space there even though it's cleared to the next line?
JSFiddle:
http://jsfiddle.net/ffxg9qq0/1/embedded/result/
Thank you!
the space was cause due to float:left of the children
you will need to write #media query so that the .parent adjusts
#media screen and (max-width: 400px){
.col{
float:none;
}
}
resize the below fiddle to max-width 400px
demo - http://jsfiddle.net/ffxg9qq0/3/
body {
font-family: "Helvetica";
}
.parent {
background-color: yellow;
overflow: auto;
padding-bottom: 20px;
display: inline-block;
}
.col {
height: 200px;
padding: 20px 10px;
margin: 10px 10px;
float: left;
}
.red {
background-color: red;
}
.green {
background-color: #00ff00;
}
.blue {
background-color: #0000ff;
color: white;
}
p:hover {
background-color: #ffff00;
}
#media screen and (max-width: 400px) {
.col {
float: none;
}
}
<div class='parent'>
<div class='col green'>
<p>I'm in a green float!</p>
</div>
<div class="col red">
<p>I'm in a red float!</p>
</div>
<div class="col blue">
<p>I'm in a blue float!</p>
</div>
</div>
Sorry if it is a duplicate of something, I have searched honestly, but I still have the problem which is shown in this fiddle: http://jsfiddle.net/tfvdzzee/1/
The code here:
html
<div id="wrap">
<div id="one">1</div>
<div id="two">2</div>
</div>
css
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one, #two
{
width: 50%;
background: green;
}
#two
{
float: right;
background: red;
}
I believe display: inline-block; is the best answer, as it prevents bugs of overlapping and overflowing, while also keeping its parent definitions.
JsFiddle Demo
HTML
<div id="wrap">
<div id="one">1</div><!--
--><div id="two">2</div>
</div>
CSS
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one, #two
{
width: 50%;
background: green;
display: inline-block;
/* If worried about IE7 and IE6, add the two next lines */
*display: inline;
*zoom: 1;
}
#two
{
background: red;
}
Demo Fiddle
You need to both float:left the #one element as well as set overflow:hidden to the parent to ensure it wraps the children correctly.
Change your CSS to:
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
overflow:hidden; /* <---ensure the parent wraps the children */
}
#one, #two
{
width: 50%;
background: green;
float:left; /* <---ensure the children display inline */
}
#two
{
float: right;
background: red;
}
Add the following style in your CSS.
#one{float:left}
DEMO
Remove the Css property for #two and add this
#one, #two
{
width: 50%;
background: green;
float: left;
}
Use float: left and you don't need float: right for #two.
#one, #two
{
width: 50%;
background: green;
float: left;
}
#two
{
background: red;
}
Fiddle example.
You will need to float both your divs. After the float, clear the float using the clearfix class.
CSS:
#one, #two{ float:left; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
HTML:
<div id="wrap" class="clearfix">
<div id="one">1</div>
<div id="two">2</div>
</div>
DEMO
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#wrap:after{
clear:both;
content:"";
display:block;
}
#one, #two
{
width: 50%;
float:left;
background: green;
}
#two
{
background: red;
}
Try this and use clearfix on the :after pseudo element of your #wrap div.
DEMO
To Expand on the comment by sifu and answer the question in a choice of ways
The first method (Using float's)
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one,#two
{
float:left;
width:50%;
}
http://jsfiddle.net/tfvdzzee/7/
Display Inline-block method
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
font-size:0px;
}
#one,#two
{
width:50%;
display:inline-block;
font-size:16px;
}
http://jsfiddle.net/tfvdzzee/8/
Both methods can be used however if you are still developing for IE7 (not sure why you would) then method 2 wont work.
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?
<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>
I'm trying following CSS which does not work:
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
}
Here's the JSFiddle link:
http://jsfiddle.net/jMR8u/
Here's what I'm trying to get:
The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.
This version will stretch to fit the contents of .text and should be cross-browser.
You can fake the blue (right) background by making it a border of .text:
.text { border-right: 1000px solid; }
Then, shift .right to the left by 1000px:
.right { margin-left: -1000px; }
Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
And give it color!
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
Here is a JSFiddle demonstration:
if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/
h1{
border: 1px solid red;
position: relative;
}
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
position: absolute;
z-index: 99;
height: 20px;
width: 100%;
}
.text {
height: 20px;
width: 150px;
display: inline-block;
position: relative;
z-index; 101;
}
ok, then use layers .. with z-index and positioning
You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:
h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }
Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/
if you can set width to the .text span and h1 element.
body{
background:green;
}
h1{
border: 1px solid red;
display:table;
width:100%;
}
.left{
background: yellow;
width: 30px;
display: table-cell;
}
.right{
display: table-cell;
background: blue;
}
.text {
display:table-cell;
width: 150px;
}
If I understood your requirement correctly. you should change your markup a little bit as below
h1 {
background: #660000;
padding-left: 30px;
line-height: 1.1;
}
h1 span {
background: #fff;
padding: 0 3px;
color: #600;
}
<h1>
<span>
Lorem, ipsum dolor. you are doing great
</span>
</h1>
and CSS goes here below