You can see the fiddle here: http://jsfiddle.net/easeS/4/
Here is the html/css I have:
#main div
{
float:left;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
}
<div id="main">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
I'm not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?
The 3rd div bumps down because there's not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.
If I understood your question correctly...
What you want to do is hide it the 3rd div, for you to do this, you'd need to:
Add another wrapper div and give it a bigger width. Have a look at my example here
No need to add extra wrapping divs...
Try this instead:
#main div
{
display:inline;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
white-space: nowrap;
}
Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.
Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.
Try with this demo.
Related
I'm trying to show a text in a border div located in absolute location inside another div.
Option 1 with width:auto; - fiddle: https://jsfiddle.net/c21kt6r4/
The problem is that the left side box expands too much.
Option 2 - with width:min-content; fiddle: https://jsfiddle.net/ay159rw6/2/
The problem is that the right side box text wraps.
What is the clean way to wrap text in div and show a correct border in both multi and single line texts?
For reference the html is :
<div class="main">
<div class="item" style="left:0;">
<label>SHAMPOO & CONDITIONER</label>
</div>
<div class="item" style="left:165px;">
<label>WHAT EVER</label>
</div>
</div>
And CSS:
.main{
position:relative;
border:solid black 1px;
width:400px;
height:400px;
}
.item{
border:solid blue 1px;
width:160px;
height:150px;
position: absolute;
}
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:min-content;
}
Follow these steps.
1) You need to warp the label inside a div and then give it position:absolute. Also you need to use right:5% to give spacing on both lefr-right sides. We're wrapping into a div because we want position relative to div we're applying table cell property.
2) You need to display: table-cell; your label tag .item label
3) Give word-break: break-all; your label tag .item label so word can take whole space
Here is the working demo: https://jsfiddle.net/o5dgzn0c/
Demo image.
Hope it will help!
I would suggest you going with max-width here, because it will limit max width of the item element to some value and keep possibility to include width:auto feature width for all elements less than it, something like:
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:auto;
max-width:100px;
}
However, I would go with JS approach on this, as you have no idea what text might appear.
I have this menu page that I want to split into 5 equal columns.
My current CSS for the yellow divs is:
width:20%;
height:100vh;
background-color: yellow;
display:inline-block;
Above this, I also have margin:0;. How can I remove the small white gap between the yellow blocks?
Using display inline-block has the weird sideeffect that it creates unwanted gaps between elements: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
A quick fix would be to float the div's left instead of using display: inline-block.
div {
width:20%;
height:100vh;
background-color: yellow;
float: left;
}
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
First I'll list my code and the link to JSFiddle.
HTML
<div id="wrapper">
<div id="container">
<div id="content">
Here is the content
</div>
</div>
</div>
JS
body,html{height:100%;}
#wrapper{
height:100%;
background-color:green;
}
#container {
display: inline-block ;
height:100%;
width:100%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#content
{
display:inline-block;
background-color:blue;
}
http://jsfiddle.net/x11joex11/b4ZBg/
(Newer one with more content for vertical center testing)
http://jsfiddle.net/x11joex11/sDWxN/11/
What I'm trying to do is vertically center the blue highlighted DIV in the center of the red div. Is there a way to do this using inline-block and not table-cells?
The height of the containing div also HAS to be 100% not a set pixel amount.
The content will also be variable height
I am trying to avoid table-cell display because of browser bugs, but if it's the only option I would like to know that also. Any solution to this issue would be appreciative.
The art of vertical centring with inline-block is to understand that the inline-level elements are centred in their line-box. So you need to make the line-height match the height of the containing box.
The line-height is determined by a combination of the line-height setting of the containing block and the content of the line.
However the line-height of the containing box cannot be set in terms of a percentage of the height of the containing box, so that provides no solution.
Instead, we can create some content on the same line as the content we want to align that's the height of the containing block using
#container:before {
display:inline-block;
content: '';
height:100%;
vertical-align:middle;
}
which will force the line height be tall enough to contain that content.
The other thing necessary is to note that vertical-align is applied to the boxes being aligned, rather than the containing box.
The result is http://jsfiddle.net/9j95x/
You can use:
top: 50%;
position: relative;
on #content, like so:
#content
{
display:inline-block;
background-color:blue;
position: relative;
top: 50%;
}
Fork: http://jsfiddle.net/brandonscript/sDWxN/9/
Here's my quick response: http://jsfiddle.net/H9nHh/
Basically use:
display:table; for #container
and display:table-cell; for #content. I then created another div with a class for x to style it to your needs.
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
I have two elements on the same line floated left and floated right.
<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
I need for element2 to line up next to element1 with about 10 pixels of padding between the two. The problem is that element2's width can change depending on content and browser (font size, etc.) so it's not always lined up perfectly with element1 (I can't just apply a margin-right and move it over).
I also cannot change the markup.
Is there a uniform way to line them up? I tried margin-right with a percentage, I tried a negative margin on element1 to bring element2 closer (but couldn't get it to work).
Using display:inline-block
#element1 {display:inline-block;margin-right:10px;}
#element2 {display:inline-block;}
Example
div {
display: flex;
justify-content: space-between;
}
<div>
<p>Item one</p>
<a>Item two</a>
</div>
#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}
fiddle : http://jsfiddle.net/sKqZJ/
or
#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}
fiddle : http://jsfiddle.net/sKqZJ/1/
or
#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}
fiddle : http://jsfiddle.net/sKqZJ/2/
or
#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}
fiddle : http://jsfiddle.net/sKqZJ/3/
reference : The Difference Between CSS Margins and Padding
By using display: inline-block; And more generally when you have a parent (always there is a parent except for html) use display: inline-block; for the inner elements. and to force them to stay in the same line even when the window get shrunk (contracted). Add for the parent the two property:
white-space: nowrap;
overflow-x: auto;
here a more formatted example to make it clear:
.parent {
white-space: nowrap;
overflow-x: auto;
}
.children {
display: inline-block;
margin-left: 20px;
}
For this example particularly, you can apply the above as fellow (i'm supposing the parent is body. if not you put the right parent), you can also like change the html and add a parent for them if it's possible.
body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
white-space: nowrap;
overflow-x: auto;
}
#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
display: inline-block;
margin-left: 10px;
}
keep in mind that white-space: nowrap; and overlow-x: auto; is what you need to force them to be in one line. white-space: nowrap; disable wrapping. And overlow-x:auto; to activate scrolling, when the element get over the frame limit.
Change your css as below
#element1 {float:left;margin-right:10px;}
#element2 {float:left;}
Here is the JSFiddle http://jsfiddle.net/a4aME/
In cases where I use floated elements like that, I usually need to be sure that the container element will always be big enough for the widths of both floated elements plus the desired margin to all fit inside of it. The easiest way to do that is obviously to give both inner elements fixed widths that will fit correctly inside of the outer element like this:
#container {width: 960px;}
#element1 {float:left; width:745px; margin-right:15px;}
#element2 {float:right; width:200px;}
If you can't do that because this is a scaling width layout, another option is to have every set of dimensions be percentages like:
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}
This gets tricky where you need something like this:
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}
In cases like that, I find that sometimes the best option is to not use floats, and use relative/absolute positioning to get the same effect like this:
#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}
While this isn't a floated solution, it does result in side by side columns where they are the same height, and one can remain fluid with while the other has a static width.
The modern answer is definitely display:flex, although I've found that space-around generally tends to gives me better results than space-between:
.container {
display: flex;
justify-content: space-around
}
<!DOCTYPE html>
<html>
<body>
<div class='container'>
<h1>hi</h1>
<h1>bye</h1>
</div>
</body>
</html>
This is what I used for similar type of use case as yours.
<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
Adjust your width and padding as per your requirement.
Note - Do not exceed 'width' more than 100% altogether (ele1_width+ ele2_width) to add 'padding', keep it less than 100%.