I'm writing a style sheet, and I want to display three elements horizontally (width=33%) within a container, with a relative layout.
Here's the code:
#container
{
margin:auto;
width:85%;
padding:0;
}
#element
{
display:inline-block;
width:33.3%;
margin-left:0;
margin-right:0;
border:0px;
text-align:center;
}
I don't understand why with three elements:
<div id="container">
<div id="element">hi</div>
<div id="element">every</div>
<div id="element">one</div>
</div>
The last element is shown below the first two, while I believed that they would be drawn on the same line. There are no margins,padding or borders.
If width is set to 32%, in a Full browser window, they are on the same line (it works), but when I reduce the browser-window width, the last element falls on a new line.
Does anybody know why this happens?
These are inline blocks, so they get laid out just like characters would (think of them as really big characters, basically). And in your case you have whitespace between them, so that whitespace becomes a single space on the line between the inline-blocks in the rendering; you can see this if you put borders on them. So the space taken up by all three together ends up being "99.9% of container width plus width of two spaces in the container's font". When you reduce to 32%, then you get line-breaking once two spaces add up to more than 4% of the container width (which is why it only happens at smaller container widths).
If you really want your inline-blocks flush up against each other, take out the spaces between them.
Make you element a class (thanx Jarrett) and add float:left style to that class.
.element
{
display:inline-block;
width:33.3%;
margin-left:0;
margin-right:0;
float:left;
border:0px;
text-align:center;
}
<div id="container">
<div class="element">hi</div>
<div class="element">every</div>
<div class="element">one</div>
</div>
I recommend to play arround with the containers width.
A tip that works for me is giving them a line. Below is my contribution:
http://jsfiddle.net/8dWhF/
Related
I have headings that have display:inline-block set, but one of them is really long and takes two lines. The issue is that when it breaks to the second line, it automatically makes it take the whole width of the parent container (even though it has plenty of space around it, and it is set to inline-block).
Anyone knows how to prevent this? Also, I can't really use a solution that only applies to this one if it will break other headings, because the same code is generating other 9 non-line-breaking headings using the same structure.
Thank you for your time.
CodePen: https://codepen.io/anon/pen/gGdYmB#anon-signup
<div id="parent1" class="parent">
<h2>SHORT HEADING</h2>
<h2>THE REALLY LONG HEADING THAT
<span>BREAKS TO A SECOND LINE</span></h2>
</div>
<style>
.parent {
width:50vw;
background-color:#046;
height:20vw;
text-align:center;
}
.parent h2 {
display:inline-block;
color:#fff;
font-family:sans-serif;
font-weight:900;
font-size:2vw;
background-color:#28a;
padding:10px 0;
}
.parent h2 span {
display:inline-block
}
</style>
By default, an inline-block will get pushed to the second line unless the entire element can fit on the first line. The whole group of words are a single element and are trying to be inserted into your header directly to the right of the word "That". Because the words as a group are bigger than what can fit on the first line, it puts them all on the next line, but only after expanding the parent (your h2) trying to accommodate it.
If you're ok with the text in span breaking to a new line:
Have your span display as block instead of inline-block, or switch to div instead of span. This will ensure that the text goes to a new line without first trying to expand your parent horizontally. Since an inline-block in this situation is probably going to have a line break anyways, why not do it this way?
If you want to make sure that the span doesn't break:
Then you can't style it as Inline-block or block. Inline-block won't break only as long as it's width is small enough. Don't set the display (in span) at all and your header will wrap the text and take up the entire width available. Then add a small left/right margin to your header, as the most wasted space you'll have is the width of your longest word being pushed to the next line.
You could set max-width: 80%; on your .parent h2 css (line 7) to get the desired result
You can set a max-width. See example below:
.parent {
width:50vw;
background-color:#046;
height:20vw;
text-align:center;
}
.parent h2 {
display:inline-block;
color:#fff;
font-family:sans-serif;
font-weight:900;
font-size:2vw;
background-color:#28a;
padding:10px 0;
max-width: 45vw; /* 5vw smaller then your parent width, which is 50vw */
}
.parent h2 span {display:inline-block}
<div id="parent1" class="parent">
<h2>SHORT HEADING</h2>
<h2>THE REALLY LONG HEADING THAT <span>BREAKS TO A SECOND LINE</span></h2>
</div>
I'm trying to achieve something simple and the rules make it non-trivial. Here is my fiddle. It is non-trivial for me to align the elements in a natural way, I think the elements should be on the same row when I make a float:left.
Hx elements have default margins.
The "space" from the top cause by the margin-top property of the H1 element.
Consider using a reset.css file to reset those default values.
Another thing is the line-height property.
In conclusion:
margin-top:0;
line-height: 20px; (choose a value that fits to your needs)
http://jsfiddle.net/ynrmwgt9/4/
I would recommend to wrap your div in a container div. A little bit like bootstrap system.
See the fiddle, and ask me if you have questions about :)
I'm using something like this :
<div class='row'>
<div class='col'>Content 1</div>
<div class='col'>Content 2</div>
</div>
The stylesheet has to specify that rowfill 100% of the width, and your two columns, the half, then 50% each.
.row
{
width:100%;
}
.col
{
width:50%;
float:left;
text-align:center;
}
Text align center is just for make it beautiful
http://jsfiddle.net/ynrmwgt9/2/
I want to align two elements,in the same line,like this: click here
full code
<div id="element1"> element 1 markup </div>
<div id="element2"> element 2 markup </div>
css
#element1 {
display:inline-block;
margin-right:10px;
width:200px;
background-color:red;
}
#element2 {
display:inline-block;
width:200px;
background-color:red;
}
Also,without overlapping each other.For example if a have a parent div,and two child divs.
The parent div,have 1000px width,and the childs have 500px each,so they fit.
But if i resize the first div to 600px,i want the second one to auto resize,and keep staying inline,without changing his position,or the first to overlap the second.
In the fiddle above,they are aligned in the same line,but doesnt matter what i do,the second one changes his position instead resizing,or they overlap each other.
Any idea?
I know it must be done with percentage,but is not working either
http://jsfiddle.net/a4aME/507/
#element1 {width:50%; background-color:red;float:left}
#element2 {width:50%; background-color:red;float:left}
Take off the the display: and float it all left.
The width attribute accepts percentage value, base on its parent (or its nearest parent with the position:relative attribute if the element has the property position set as "absolute" or "fixed").
So you can use this CSS to the child
#element1 {display:inline-block;margin-right:10px; width:50%; background-color:red;}
#element2 {display:inline-block; width:50%; background-color:red;}
PS: If you are using inline-block, you have to make sure that there is no space between the tags, so you HTML must became this
<div id="element1"> element 1 markup
</div><div id="element2">
element 2 markup </div>
Check this jsfiddle to see if it is what you wanted. I'm not using display:inline-block since it looks that it is what's causing the problem. If you don't mind using floats, then this is your answer.
EDIT:
Check this resource here to see/correct your problem.
I've created a container with a width:90% (and 10% of padding) and within it are three display:inline divs with a width:30%
This didn't have the desired effect, I wanted the three divs to stretch to 30% of the container, thus filling the whole container.
First go creating something responsive. I intend to put my images within these divs with a max-width to create a responsive grid of products.
JS Fiddle
As you can see the product divs are simply stretching to the size of the text, when I want them to expand to fill the content area.
Live example
CSS:
.shoppg #content{
width:90%;
margin-top: 60px;
margin-left:5%;
margin-right:5%;
}
.product{
width:30%;
display:inline;
}
HTML:
<div id="content">
<div class="product">
product 1
</div>
<div class="product">
product 2
</div>
<div class="product">
product 3
</div>
</div>
Here is what you're looking for:
http://jsfiddle.net/abrdn/6/
Basically, you need to float them to get them to meet your requirement of filling to fit the div.
But since your ultimate goal here is a responsive design, you need to give your product divs a fixed width, otherwise, they won't go from being on the same row to being vertically stacked when the display becomes too small. Like this...
http://jsfiddle.net/abrdn/10/
Notice how the divs instead go to another row, instead of simply squishing together and getting smaller when you use a percentage width.
You can extend this a little furth, to do a fixed min-width with a percentage width to allow it to fill, but then go to a new row once the min-width is reached, like this:
http://jsfiddle.net/abrdn/12/
You just forgot to float .product
.product{
float:left;
width:30%;
display:inline;
}
If you float an element, the display property is useless, but display:inline fixes an IE7 issue.
Some resources:
http://css-tricks.com/all-about-floats/
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
display:inline-block; + float:left; because inline-block adds weird margin/padding to the box model. But shouldn't .product's width be 33.33333% because you are dividing #content's width by 3?
Then use width:100%; height:auto; display:block; for the images and they will fill and stretch all day.
I'm trying to put div elements right next to each other. The problem is, even if there is enough room for the two elements to be on the same line, the new div moves itself to the next line, I need the other div only to go to the next line if there isn't enough room.
Does anybody know how to do this?
Set the CSS display style to display:inline-block;.
This allows the element to keep it's block-like functionality, while also allowing it to be displayed inline. It's a half-way house between the two.
(But note that there are some compatibility issues with older versions of IE)
Divs are block level elements, so by default they will always occupy an entire line. The way to change this is to float the divs:
<div style="float: left"></div>
Use float's and margin's; that way when there's no space you can just put overflow:hidden to the container hide the rest of the div instead of making it go to the next line.
CSS
.container {
width:500px;
background:#DADADA;
overflow:hidden; /* also used as a clearfix */
}
.content {
float:left;
background:green;
width:350px;
}
.sidebar {
width:155px; /* Intentionaly has more width */
margin-left:350px; /* Width of the content */
background:lime;
}
HTML
<div class="container">
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
In this demo you can see: floats, margin+floats, display:inline-block.
Demo here: http://jsfiddle.net/kuroir/UupbG/1/
You need to use float CSS rule. Just use some class or identifier and set float to left or right.
Make sure that you have a fixed width to the divs