I have a html structure like this:
<div class="content">
<div class="icon"></div>
<div class="text">Some long message text which is wrapped in two lines.</div>
<div style="clear:both"></div>
</div>
and corresponding css:
.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}
I want to align icon and text componenent in one line without using any relative and absolute width value.
Here is a fiddle - http://jsfiddle.net/7kNSs/
Remove CSS float property form .text
Try Fiddle
HTML :
<div class="content">
<div class="icon"></div>
<div class="text">Some long message text which is wrapped in two lines.</div>
<div style="clear:both"></div>
</div>
CSS :
.content
{
width:300px; margin:30px auto; border:1px solid #000;
}
.icon
{
width:40px; height:40px; background-color:maroon; float:left;
}
All you gotta do is take out the .text div:
<div class="content">
<div class="icon"></div>
Some long message text which is wrapped in two lines.
Some long message text which is wrapped in two lines.
Some long message text which is wrapped in two lines.
Some long message text which is wrapped in two lines.
<div style="clear:both"></div>
</div>
.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}
Check the forked fiddle: http://jsfiddle.net/Milanzor/tfrH6/
remove float form text class
html
<div class="content">
<div class="icon"></div>
<div class="text">Some long message text which is wrapped in two lines.</div>
<div style="clear:both"></div>
</div>
css
.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon;float:left;}
Try to change this line .content {width:300px; margin:30px auto; border:1px solid #000}
by this
#content { overflow: hidden;width:300px; margin:30px auto; border:1px solid #000}
Related
I have started a huge revision on my css knowledge.
I am trying to do the following:
I want to create a wrapper div that contains to divs with some text and some content.I want each div with class item-2 inside that div to have a width:50%
and appear next to another item-2.
Here is a snippet of my code:
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
text-align:center;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
As you can see it's div appears below its previous div.However I want them to be next to each other.How can I achieve this? I would like an explanation to your solution sa as to improve my knowledge
Flex can keep them in one row.
.wrapper {
display: flex;
}
And remove display: inline block for items. If you want in small devices they are under each other add this to .wrapper
flex-wrap: wrap;
And we need a min-width for items. .items: min-width: 250px;. If your device has enough space (500px) they will remain in one line, else the second item goes to next line.
.wrapper display: flex;
.item-2 flex: 1;
Why is this happening?
Using inline-block in this way is perfectly valid and will work but you have two issues that are causing the elements to occupy separate lines:
inline-block items honour the white-space between elements so there is an extra space between the two .item-2 divs
The width of .item-2 is not 50% but 50% + 2px left border + 2px right border
How to fix
There are multiple ways of getting round the white-space issue including setting font-size: 0;, however, as the height and width of .demo use ems you are probably best removing the white-space from between the elements in the HTML instead
To ensure .item-2 actually has a width of 50% you can add box-sizing: border-box; which will make the width and height include the padding and border
body {
background: rgba(10, 10, 10, .8);
}
.wrapper {
margin: auto;
position: relative;
width: 100%;
}
.item-2 {
border: 2px solid blue;
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 50%;
}
.demo {
background: yellow;
height: 5em;
margin: auto;
width: 5em;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div><!--You can remove the white-space by adding a comment between the elements
--><div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
Try this code...
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
float:left;
text-align:center;
box-sizing: border-box;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
aside float and flex, there's also:
display:table;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:table;
table-layout:fixed;/* to even cells and keep within width set */
}
.item-2{
text-align:center;
display:table-cell;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
display:grid;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:grid;
grid-template-columns:50% 50%;
}
.item-2{
text-align:center;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
This is an excerpt from a much more complex problem, but the issue comes down to this: the code works on FF43, but not on IE11. After two days, I have determined that you can get the FF output to look like the IE output by reducing the width of the outer wrapper. I've tried variants on position, float, display, etc., all to no avail.
The goal was, as the content grows, to get the content div to resize horizontally first (expanding all the wrappers), and then to resize the content div vertically when the outer width limits are reached. Any ideas?
<!DOCTYPE html>
<style>
.wrapper { xwidth:480px; border:1px solid violet; }
.formbox { display: inline-block; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; background: #FFFFFF; border:1px solid black; }
.row { display: block; border: 1px solid #ccc; margin:3px; padding:4px; clear:both; position:relative; }
.label { float:left; display:inline-block; width:120px; text-align:right; padding-right:4px; border:1px solid red; }
.icons { float:right; width:40px; border:1px solid red; text-align:center; }
.input { display:inline-block; border: 1px solid green; }
</style>
<div class="wrapper">
<div class="formbox">
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
</div>
</div>
fiddle: https://jsfiddle.net/des2016/r7x6d2tw/
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
I have a div that contains inside 3 'floated' divs. The containing div has a line of text. The three floating inner divs also have a line of text.
When I specify text-align center for the outermost containing div, the three nested divs appear first, on one row next to each other left-to-right, and THEN the containing div's text appears to the right of the contained divs, centered in the space to the right of them.
Instead, I don't understand why the outermost containing div's text will not appear centered in the browser window, then below that the 3 contained divs and their text would appear. That's what I need to happen.
Here is the code. By the way I tried to embed a .jpg image into this question so you can see the problem -- anyone know how to display a screenshot or .jpg into a question here?
<head>
<style>
#myRowStyles
{
text-align:center;
margin-bottom:100px;
background-color:#b0e0e6;
border: 1px solid red;
}
#leftSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#centerPiece
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#rightSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
</style>
</head>
<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div style="clear:both">
</div>
<div id="myRowStyles"><b>THIS IS ROW #2</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
First you have multiple same ID's on the page. That's bad. Change them to classes.
Second give myRowStyles a width.
I think that to make divs behave like tables you must define the display attributes in CSS:
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
So you will also need to add an extra <div> at the beginning for the container. I haven't tested this.
Also, I dont think you can make a single row span 3 columns when using DIVs so you must do something like this:
<head>
<style>
#container {
width:90%;
float:center;
margin-left:10px;
margin-top:30px;
border: 1px solid blue;
text-align:centre;
display: table;
}
#myRowStyles
{
text-align:center;
background-color:#b0e0e6;
border: 1px solid red;
display: table-row;
}
#leftSide,#centerPiece,#rightSide
{
width:120px;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
display: table-cell;
}
</style>
</head>
<div id="container">
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 1
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 2
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
</div>
Try something like this: http://jsfiddle.net/We74E/2/