I have five square buttons in a row that I am displaying as a lock. However when viewing on a mobile phone the 5 icons do not stack, they bunch up and overlap with the element below them. I thought that adding the clear element would resolve that but it doesn't. Can anyone point me in the right direction?
Thanks so much, I greatly appreciate it!
.menu {
height: 100px;
clear: both;
width:100%;
margin-bottom:40px;
margin-top:35px;
}
.icons {
height: 100px;
width:100px;
display: inline-block;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
background-color:#ffffff;
}
Removing the height property from your .menu class (or, at the very least, changing it to min-height) will allow your parent element's height to expand to fit its contents, thereby pushing the content that follows it down the page.
See examples below for an illustration.
div{
background:green;
margin:5px 0;
padding:5px;
}
p{
font-family:sans-serif;
margin:0;
}
div p{
background:red;
min-height:40px;
}
div~div{
height:20px;
}
<div>
<p>This paragraph's parent doesn't have set height and therefore will expand to fit the height of this paragraph</p>
</div>
<p>This is just a placeholder</p>
<div>
<p>This paragraph's parent has a set height and therefore won't expand to fit the height of this paragraph</p>
</div>
<p>This is just a placeholder</p>
Related
I'm trying to achieve some indent for content inside div. I want to have all elements inside to have 100% width, but first ones have to be positioned further from the left side. This demonstration shows what I exactly need:
I tried to mess around with ::before pseudoelement for parent div, different positioning and floating but no luck. Is there a way to achieve this in CSS or maybe jQuery?
Use the :nth-child pseudo class to select the items you want and then just give them a margin.
div{
border:1px solid #000;
padding:5px 10px;
}
p{
background:#000;
font-family:arial;
color:#fff;
margin:5px 0;
padding:5px;
}
p:nth-child(-n+2){
margin:5px 0 5px 50px;
}
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</div>
By the way, floating items and giving them a 100% width is somewhat redundant so I have omitted that from my code.
You don't need to add width:100% to your elements. If they are block elements it will take automatically 100% of the container width. Then just use marginto whatever element you need:
HTML:
<div class="container">
<div class="content margin"></div>
<div class="content margin"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
body {margin:0; padding:0;}
.container {
width:400px;
padding:20px;
background-color:#ddd;
}
.content {
height:60px;
background-color:green;
margin-bottom:10px;
position:relative;
}
.margin {
margin-left:150px;
}
FIDDLE
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I want the child divs to be always centered within their container, even on resize, and without changing their size.
Problem Example : http://jsfiddle.net/bQMj7/
HTML
<div id='foo'><div id="container" class='group'>
<div class='childs'>one</div>
<div class='childs'>two</div>
<div class='childs'>three</div>
<div class='childs'>four</div>
<div class='childs'>five</div>
</div>
</div>
CSS
#foo {
text-align:center;
}
#container {
background-color:beige;
display:inline-block;
}
.childs {
width:50px;
height:50px;
background-color:blue;
float:left;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
I used the "inline-block / text-align:center" technique to center the child divs in their main container. When you resize the window, the floated child divs collapse, that's what I want, BUT as they collapse they're not centered anymore within their container.
I want the cloud of these collapsing-on-resize divs, to be always centered.
Do you have any idea?
Edit : Thanks for the reply, that's pretty much what I'm looking for ! My concern however is that:
The reason why I used float left instead of inline-block is that I wanted those child divs to have no space between each others (which they do have as line elements unless I mess up my code indents to have those many childs on the same line code)
I want the collapsing final line to be aligned left just as the other lines, but the whole being centered.
Here's an update with the two issues above : http://jsfiddle.net/bQMj7/6/.
you may use inline-block for all of them and fake a float : center ; wich doesn't exist.
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin:5px;
}
DEMO http://jsfiddle.net/bQMj7/1/
Is this what you are looking for:
http://jsfiddle.net/collabcoders/bQMj7/3/
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
EDIT: If I understand you correctly you want the space gone between blocks but still keep the center. inline-block for some reason put 4px space on the right so simply add margin-right: -4px; to fix:
HERE'S THE NEW FIDDLE: http://jsfiddle.net/collabcoders/bQMj7/10/
and the update to the .child class
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right: -4px;
}
I want to center text vertically aligned without using the box property because It does not work in IE9 so I have read it. I have only IE 10 here...
http://jsfiddle.net/J8rL7/6/
I have also tried display:table-cell and vertical-align:middle but this destroyed the whole layout.
Are there any vertical align tricks for my scenario which support IE9+, Chrome/Firefox (latest).
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff99cc;height:25%;">1</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff33cc;height:50%;">2</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff66cc;height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:orange;height:50%;">Total</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:blue;height:50%;">Test</div>
</div>
</div>
</div>
Let's update this and go old ways, so older IEs should come in the run too:
Let's use specifitie of inline-boxes and use one inline-level empty element to secure vertical-align.
DEMO to test : http://jsfiddle.net/D9gnP/6/ - http://jsfiddle.net/D9gnP/6/show.
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
/* text-indent:-0.5em; to swallow word spacing , should be right value */
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;/* no need to have a width, it's got be invisible */
margin:0 -5px;/* this will reduce effect of word spacing to none, it can be a little oversized */
}
If you want to use table-cell, you need to start from the main container drawing the column. and end up with table-cells to use the vertical-align rule.
I added an extra span to get to it :
http://jsfiddle.net/D9gnP/
.fluid-column,
.fix-column{
display:table-row;
width:100%;
}
.fluid-column > div,
.fix-column > div{
display:table;
height:100%;
width:100%;
}
.fluid-column > div > span,
.fix-column > div> span {
display:table-cell;
vertical-align:middle;
}
I just added "text-align: center;" in div tag.
It is done, check below link..
http://jsfiddle.net/J8rL7/15/
http://jsfiddle.net/J8rL7/24/
If you look at http://www.vanseodesign.com/css/vertical-centering/ and the heading: Absolute Positioning and Stretching
It requires adding a span around each text field, and a couple of classes
.vert {
position: relative;
}
.span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90%;
height: 30%;
margin: auto;
}
I've used this trick before for vertical alignment:
HTML:
<div id="container">
<div class="center">vertically centered content</div>
</div>
CSS:
#container { white-space:nowrap; height:200px; }
#container:before { content:""; display:inline-block; width:0; height:100%; vertical-align:middle; }
.center { display:inline-block; vertical-align:middle; white-space:normal; }
This creates a pseudo-element before the element with class="center" and uses inline-block so the vertical-align style takes effect.
Here's a jsfiddle so you can check if it works for you: http://jsfiddle.net/Etzpj/
I think that in your case you would need to wrap the text on each cell with another element for this trick to work.
Edit: here i used this trick in your fiddle http://jsfiddle.net/J8rL7/25/
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post