I know there a many of these about but for some reason I keep failing to implement them.
So I need the content in the class .infobox to be in the middle of the div. So I need it aligned vertical and horizontally.
I have put ALL my code below as some of the "fixes" I tried worked but caused the layout to move and so on. So hopefully you guys can get it aligned without causing the layout to break.
Fiddle is at the bottom. On a side note if you have any tips on how to neaten the layout code please do let me know. But the main problem is aligning the content.
HTML:
<div id="con">
<div id="box">
<div id="header"><h1>Test</h1></div>
<div id="left">
<div class="infobox">Test: <br /> <input /> </div>
<div class="infobox">Test: <br /> <input /> </div>
<div class="infobox">Test: <br /> <input /> </div>
<div class="infobox">Test: <br /> <input /> </div>
</div>
<div id="right">
<div class="resultbox">
<ul>
<li>Test <br />Test</li>
</ul>
</div>
<div class="contactbox">
<ul>
<li>Phone Number: <br /> 00000 000000</li>
<li>Email: <br /> test#Test.com</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
div {
outline: 1px solid #000;
}
#box {
width: 580px;
height: 300px;
}
#header {
height: 15%;
background: url(http://us.123rf.com/400wm/400/400/mechanik/mechanik1112/mechanik111200003/11665900-vector-cartoon-semi-truck.jpg) no-repeat;
background-size:80px 40px;
background-position:right top;
}
#left {
width:70%;
height: 85%;
float: left;
}
#right {
width:30%;
height: 85%;
float: right;
}
.infobox {
width: 50%;
height: 50%;
float: left;
text-align: center;
}
.resultbox {
width: 100%;
height: 50%;
}
.contactbox {
width: 100%;
height: 50%;
font-size: 12px;
}
.contactbox ul, .resultbox ul {
margin: 0;
}
.contactbox li, .resultbox li {
list-style: none;
}
DEMO HERE
What I have tried:
Tried to use padding-top and padding-bottom - This seemed to not align it correctly and then I couldn't get the layout to sit correctly.
Also looked into using position: relative and position: absolute but I have never been too good with them and couldn't manage to get the content to sit where I wanted it to.
I took the liberty of manipulating you mark-up a bit and added an extra div to achieve the output.
Fiddle
HTML
<div class="infobox">
<div class="cent">Test:
<br />
<input />
</div>
</div>
CSS
.infobox > .cent {
outline: 1px solid #0F0;
vertical-align: middle;
margin-top:20%;
}
Whats happening here??? : since your content div infobox has the styling, to give a different set of styling to inner content(which is not floating), you have to use a them under a child div for display!
add margin:0 auto; to #box
like so: http://jsfiddle.net/c82DU/2/
You could take a look at this site, it explains a bit about tables.
The layout u are using looks like a table, so why not use tables? easier text aligning
http://www.w3schools.com/html/html_tables.asp
Related
I have problems with divs. I would like the link "Go" to be right aligned and vertically middle of its parent div. I have tried several ways, but no success yet.
And here you can see my HTML and CSS code:
div.row {
position: relative;
border-bottom: 1px dotted #999999;
}
div.list div.name {
float: left;
width: 40%;
}
div.list div.info {
float: left;
width: 60%;
}
div.list div.action {
display: inline-block;
text-align: right;
vertical-align: middle;
}
<div class="list">
<div class="row">
<div class="name">
<span>1</span>
<br />
1
<br />(2015-09-30)
</div>
<div class="info">
<b>Place:</b>
<br />Now 6
<br />Later 32
<div class="action">
Go
</div>
</div>
</div>
</div>
So, if you have better ideas and know how I could solve my problem, I would love to hear.
If possible, I'm looking for a cross-browser solution. No JavaScript/jQuery allowed this time.
For a parent with a dynamic height and cross browser functionality, you will need to use an older CSS2 trick, using display: table-cell inside a display: table div. This explains it in more detail
HTML
<div class = "info-left">
<b>Place:</b>
<br />Now 6
<br />Later 32
</div>
CSS
.info{
display: table;
}
div.info div.action{
display: table-cell;
vertical-align: middle;
}
Here's a fiddle
I've got a problem with my HW. I cant align 2 elements on the left side https://jsfiddle.net/tkjxLfjy/ This is the code and i tried things like float:left but didn't work... So can you help me to put the meter and the text under the picture (the black sqare)?
According to w3school:
Elements after a floating element will flow around it. To avoid this,
use the clear property.
Add Clear:both to the div. The image has float:left so the next elements sit behind that.
Jsfiddle
figure div
{
clear: both;
}
You can remove float:left and add display: block to the image
Basically display: block reserve the whole line for the element, so that no other element set beside it, unless it's positioned.
Here is a fiddle
You should try like like this-
.clr{
clear:both
}
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
}
.header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
figure{
float: left;
}
img {
width: 150px;
height: 150px;
background: black;
}
meter {
width: 90px;
}
.meter-col{
float: left;
}
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
</figure>
<div class="meter-col">
<div>Profile completed: 60%</div>
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
<div class="clr"></div>
</div>
May it will helps you.
<div id="container">
<div class="header">
<h2>Profile</h2>
</div>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<div>
Profile completed: 60%
<meter value="60" min="0" max="100">2 out of 10</meter>
</div>
</figure>
</div>
No need of other changing 'cause the tag has a default "block" behavior.
I changed a few things around. I also updated a few things to HTML5 (preferred). I changed everything to display block and changed the div that all of that lives in to float: left. JS fiddle link below.
https://jsfiddle.net/tkjxLfjy/6/
HTML:
<body>
<div id="container">
<header>
<h2>Profile</h2>
</header>
<figure>
<figcaption>User: Kent</figcaption>
<img src="avatar.png" />
<label for="meter">Profile completed: 60%</label>
<meter name="meter" value="60" min="0" max="100">2 out of 10</meter>
</figure>
</div>
</body>
CSS:
body {
font-family: serif;
height:100%;
width: 100%;
}
#container {
width: 650px;
border-radius: 10px;
height: 280px;
background-color: pink;
float: left;
}
header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
img {
width: 150px;
height: 150px;
background: black;
display: block;
}
meter {
float: left;
width: 90px;
}
I have an information bar at the bottom of my site. It has several inline-block elements that are displayed horizontally. As you can see in the fiddle, when the information in the inline-block elements gets too large vertically, it overflows below the bottom edge of the information bar. I would like this stuff to overflow to the right, similar to a newspaper column.
jsfiddle: link
<div class="information-bar">
<div class="information">
<div class="title">Section Title</div>
information <br />
information2 <br />
information3 <br />
information4 <br />
information5 <br />
</div>
<div class="information">
<div class="title">Section Title</div>
information <br />
information2 <br />
information3 <br />
information4 <br />
information5 <br />
</div>
</div>
The goal is to transform this:
to this:
I have tried the css3 columns method: jsfiddle.
Unfortunately it is only designed to work with one column, I believe, because this happens:
I think I got it. There's one issue, however: when the windows is too small, the second information set is displayed below. But I think this isn't a big issue, since it's not that wide.
.information-bar {
width:100%;
height: 100px;
background: #999;
position: absolute;
bottom: 0;
}
.information-bar .information {
display: block;
height: 95px;
-webkit-column-width:144px;
-webkit-column-gap:16px;
-moz-column-width:144px;
-moz-column-gap:16px;
column-width:144px;
column-gap:16px;
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
}
div.information
{
float:left;
width: 304px; /*quick math: 144*2+16=304*/
}
Using the insight from this gist, we can organize the information in columns, but we must know the maximum column width beforehand:
.information-bar {
width:100%;
height: 100px;
background: #999;
position: absolute;
bottom: 0;
}
.information-bar .information {
display: inline-block;
vertical-align: top;
height: 95px;
}
p.info-element {
line-height: 1.2em;
}
p.info-element:nth-child(n+1):nth-child(-n+5) {
margin-left: 0em;
}
p.info-element:nth-child(6) {
margin-top: -6em;
}
p.info-element:nth-child(n+6):nth-child(-n+10) {
margin-left: 100px;
}
The nth-child(n+1):nth-child(-n+5) selector allows us to select a range of elements (as discussed in the gist). An interesting css hack!
jsfiddle
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
i'm attempting to create an header which is divided into 3 divs
they will all be set to display: inline-block
the left header part will contain a slogan and a logo which i wan't the slogan to be at
the right of the logo
the problem is my logo div and my slogan div are always placed one on top of the other .
to my understanding an inline element would be placed next to the last inline element
with in the same block , notice that the header-left div has 250px width and each of the
child div's have 100px width so why are they not placed one next to the other ?
my markup :
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
my css :
div#header
{
border: 1px solid black ;
height: 200px;
}
div#header div#header-left
{
display: inline-block;
height: 100%;
width: 250px;
}
div#header div#header-left div#logo
{
display: inline-block;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
display: inline-block;
height: inherit;
width:100px;
}
everything's fine. just close the logo's <div> properly. "self-closing" tags.
<div id="header">
<div id="header-left">
<div id="logo"></div>
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
i also suggest using an <img> for the logo (and make it a link to homepage) rather than just a background. empty <div> tags are prone to errors during validation.
It is stange that your #header has a width of 200 pixels and the child #header-left 250 pixels, but apart from that I think it's better to use a float. This means that the two divs are next to each other:
div#header div#header-left div#logo
{
float: left;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
float: left;
height: inherit;
width:100px;
}
And you nead a clear in your html/css:
.clear_left { clear: left; }
And the html:
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan"><span> Buy For U</span></div>
<div class="clear_left"></div>
</div>
</div>