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;
}
Related
i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.
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
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 have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/
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>