I have an outer div and 2 inner divs - one left-alignd and another is right next to it. The issue I am having is that the left div is shorter then the right and then right wraps around the left.
Below is my html and CSS:
<div id='green'>
<div id="orange">test</div>
<div id="red">
Effects<br/>
Add Class<br/>
Color Animation<br/>
Easing<br/>
Effect<br/>
Hide<br/>
Remove Class
Show
Switch Class
Toggle
Toggle Class
</div>
</div>
and here is CSS:
#green {
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange {
width:185px;
border:10px solid orange;
float:left;
}
#red {
border:5px solid red;
width: 100%;
display: block;
}
My question is how can I prevent the right div from wrapping around the left? Preferable without setting a margin on the right div.
I also want the red div to always be on the right of the orange div, never going under it or wrapping around it, even if the page is resized or if the page is viewed on a mobile browser
You can use flexbox for this. Using the following changes to your CSS above:
#green{
display: flex;
align-content: top;
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange{
align-self:flex-start;
width: 185px;
border:10px solid orange;
}
#red{
width: 100%;
border:5px solid red;
}
If you want #orange to be the same height as #red, remove align-self: flex-start
Demo: http://codepen.io/anon/pen/YwOjyP
I got it working by adding display: inline-flex; to #green.
Look: https://jsfiddle.net/4k1ohc10/
By the way, you didn't ask for a specific browser, so you can check this page: http://caniuse.com/#feat=flexbox
Related
I would like to layout my website header with an image to the left and some text aligned at the bottom left ...
...or bottom right.
...or even better, have the image DIV height perfectly fit in the parent DIV :
...
Unfortunately I cannot get past this :
I am approaching this in two parts. The first part is to float my two inner elements left with a simple :
float:left;
on both inner DIVs.
Then with the second inner DIV I am playing around with position
position:fixed;
right:0;
However if I also add bottom:0 then I get something like this :
The second DIV has jumped outside of the outer DIV. How do I make it so that the positioning is relative to the parent DIV? I have tried position:inherit/absolute/fixed and nothing seems to work. Do I have to set something on the parent DIV?
Here is my JSFiddle: http://jsfiddle.net/c0gjq2fb/8/
Is there something I am not understanding right? Is there a take home message? I never seem to understand HTML/CSS layouts no matter how hard I try :(
You can use Flexbox
.outer {
border: 5px solid red;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.inner2 {
align-self: flex-end;
border: 5px solid green;
}
img {
border: 5px solid blue;
}
<div class="outer">
<img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
<div class="inner2">Some text</div>
</div>
The border is messed up cause of the height: 100%; value. If you remove the border, it's fine.
http://jsfiddle.net/j9p78a91/
add
position:relative;
top:220px;
to css class .inner2.
.outer {
border-style: solid;
border-width: 5px;
border-color: red;
width: 100%;
height: 280px
}
.inner1 {
border-style: solid;
border-width: 5px;
border-color: blue;
float:left
}
.inner2 {
border-color: green;
border-style: solid;
border-width: 5px;
float:right;
position:relative;
right:0;
top:220px;
}
<div class="outer">
<div class="inner1">
<img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
</div>
<div class="inner2">
Some text
</div>
</div>
I have two divs next to each/side by side..
The LEFT div has a FLUID width.
The RIGHT div has a static wdth.
When I resize the screen/browser... it work great! (and as intended).
However because of the way it was set up:
(Fiddle example: http://jsfiddle.net/VHcPT/384/)
The RIGHT div in physically first in the mark-up..(and floated RIGHT).
However at say 768px breakpoint.. I need this RIGHT (static) DIV to stack UNDER the LEFT div.. how can I achieve this?
If I physically have the RIGHT div AFTER the LEFT div in the markup.. it would stack as expected.. but I need to have it FIRST so the fluid/static behavior in place works as it should.
So to re-cap, its NOT about getting the two divs next to each other one fluid, one static.. its how to handle that at a responsive/breakpoint.. and get the static (RIGHT) div to stack UNDER the fluid (LEFT) div
Using the fiddle example.. the RED DIV would go UNDER (stack) the GREEN lines/div.. (the green would then be full width).. at a certain breakpoint.
and because code is required now:
HTML:
<div id="contentcontainer">
<div class="rightcontainer">mm</div>
<div class="leftcontainer">
<div class="item_1">
some text
</div>
<div class="item_2">
some text
</div>
</div>
</div>
CSS:
#directorycontainer {
padding:10px 10px;
display:table;
box-sizing: border-box;
width: 100%;
font-size: 0.8em;
font-weight: normal;
}
.directory {
background: green;
margin-right: 10px;
overflow: hidden;
padding-right: 10px;
position: relative;
}
.mapcontainer {
background: red;
display:table;
width:240px;
height:480px;
float:right;
position:relative;
overflow: hidden;
}
.providercontainer{
background-color: #f7f9fb;
border: 1px solid #e1dacd;
display: table;
margin-bottom: 0.625em;
padding: 0;
width: 100%;
}
OK well looks like this works and should be an acceptable answer/solution:
Fiddle:
http://jsfiddle.net/VHcPT/389/
HTML/Markup:
<div id="contentcontainer">
<div class="leftcontainer">
<div class="item_1">
some text
</div>
<div class="item_1">
some text
</div>
</div>
<div class="rightcontainer">mm</div>
</div>
CSS:
* {box-sizing: border-box;}
#contentcontainer {
padding:10px 10px;
display:table;
box-sizing: border-box;
width: 100%;
font-size: 0.8em;
font-weight: normal;
}
.leftcontainer {
background: green;
overflow: hidden;
padding: 5px;
float:left;
width:calc(100% - 240px);
}
.rightcontainer {
background: red;
display:table;
width:240px;
height:480px;
float:left;
position:relative;
overflow: hidden;
}
.item_1{
background-color: #f7f9fb;
border: 1px solid #e1dacd;
display: table;
margin-bottom: 0.625em;
padding: 0;
width: 100%;
}
works with whatever breakpoints you set and the elements will stack correctly.
you may like my FLEXBOX alternative to you problem. It may take a bit of practice, but it will eventually give you much more control.
The FIDDLE
Below the basic CSS structure, no other 'display', 'position' or 'overflow' needed. With this structure you can mix-match any number of fixed and/or fluid columns.
.flex--box { display: flex; flex-flow: row wrap }
.flex--fluid { flex: 1 1 auto }
.flex--fixed { flex: 0 0 auto; min-width: 240px }
/* MOBILE MQ */
#media all and (max-width: 360px) {
.flex--fluid, .flex--fixed {
flex: 1 1 auto;
}
}
Let me know if you have problem with it.
And of course, do give credit if you think it is worth it.
( BTW: I changed the colors to something less retina intensive &D )
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
Alright, this one should be pretty easy for you front-end guys out there. I have the styled purple link all set to go. I'm just having trouble getting the vertical line to look OK. Assume the line is 1px #000 solid
I kind-of got it working making a div w/ a bottom-border and floating the styled link to the right. If I do that, I can't seem to get there to be space between the divider line and the link.
The following involves some extra markup and uses table-cells.
HTML:
<div class="wrapper">
<span class="leader">
<b></b>
</span>
<span class="cell">
<button>Sample Button</button>
</span>
</div>
CSS:
.wrapper {
border: 1px dotted gray;
display: table;
width: 100%;
}
.wrapper .leader, .wrapper .cell {
display: table-cell;
vertical-align: middle;
}
.wrapper .leader {
width: 100%;
padding: 0 10px;
}
.wrapper .leader b {
display: block;
border-bottom: 1px solid red;
}
.wrapper button {
white-space: nowrap;
}
Demo at: http://jsfiddle.net/audetwebdesign/8aSBA/
There are a few advantages to this approach:
You can control the spacing to the left and right of the horizontal line
Vertical alignment is independent of font-size, line-height
You don't need to specify the width of the button
You can use a :before selector in css, though im not sure is compatable in < ie7
.button:before {
background: none repeat scroll 0 0 #000000;
content: "";
float: left;
height: 1px;
margin-top: 12px;
width: 59%;
}
I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.