I am currently building my hs project, I'm just a beginner and I am struggling with this column like I want my bio looks like this one (below)
But I can't really do achieve this, this is my HTML and CSS code
html :
<div class="row">
<div class="column">
<img src="photos.png" style="width: 320px;">
</div>
<div class="column" id="david">
<h1>David Watson</h1>
<h2></h2>
</div>
</div>
and here is my CSS code for that
css:
.column {
float: left;
}
.row {
margin-left: 350px;
margin-top: 100px;
}
/* Clear floats after the columns */
h1 {
font-weight: 10;
font-style: italic;
}
and btw this is how it works
use
.row{ display:flex }
then the child element will take side by side position you can have a quick look on this too https://www.w3schools.com/css/css3_flexbox.asp
.row {
display:flex
margin-left: 350px;
margin-top: 100px;
}
.column {
margin:0 2rem;
}
h1 {
font-weight: 10;
font-style: italic;
}
Related
I have two divs. First one has a image file and the other one has a username. I just want to align the second div vertically center just like this way.
But this one is not aligned perfectly. This screen already coded but the problem is that I still couldn't figure out the perfect way to align middle the user name div. I just use my naked eye and adjust padding.
Here is the my code
.tag-header {
padding: 12px;
overflow: auto;
}
.tag-header .tag-header-img {
height: 55px;
width: 55px;
border-radius: 50%;
float: left;
}
.tag-header .info {
padding: 14px 11px;
display: inline-block;
font-size: 1.3rem;
line-height: 14px;
}
.tag-header .info p {
margin: 0;
font-weight: 600;
line-height: 1;
font-size: 1.3rem;
}
.tag-header .time {
display: block;
font-size: 1.2rem;
}
.info span {
font-weight: 300;
color: #b9b9b9;
}
<div class="tag-header">
<div class="col-md-6">
<div class="row">
<img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt="">
<div class="info">
<p>John Stevens</p>
<span class="time">2 minutes ago</span>
</div>
</div>
</div>
fiddle
Any solution?
Heres your fiddle updated https://jsfiddle.net/p4x7d3fq/5/ -- i added borders just so you can see.
Using display:table-cell you can achieve this, if you don't mind the slight changes, including the addition of a height to match that of your image.
You seem to have done an ok job making them both have the same height, the image doesn't have to use float: left;, you can also use display: inline-block; on it and vertical-align: middle; on both the image and the name, this way you don't need them to have the same height.
Also, make sure you use Bootstrap properly, you first need a "container" div, in the container you put a row, and in that row you put columns.
You only put a div with a row class in a column div if you want more columns in that column.
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
Try to use flexbox:
.info {
display: flex;
}
After thoroughly researching for the way to fix this I have still not found the answer I seek. I finally decide to post my problem on stackoverflow.com because I finally give up trying to find the answer. What I get as a result is two boxes with content on top and one box on the bottom.
Here is the CSS code:
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
Here is the HTML Code:
<div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
The problem is your padding, as mentioned above.
Here is a fiddle with the padding removed and colours added: http://jsfiddle.net/gj0wmgym
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
}
The problem with your code is that your .box class assigns a width of 33%, with additional padding. This leads to a total width of more than 100%. Padding is added to the .box's initial width because that's how the default box model works in CSS.
To fix this problem, add this line to the .box's style declarations:
box-sizing: border-box;
You can see a live demo here. If you want to learn more about the box model, this article by Chris Coyier is an excellent reference.
From what I can tell, your floats are working correctly.
Your html was missing the id attribute, so make sure to add that to your html.
What you are probably expecting is for the floats to not wrap to the next line, which is because the padding gets added to the width size (the elements are greater than 33%). You instead need to set the box sizing attribute see this article
* {
box-sizing:border-box;
}
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
<div id="content_area">
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
I would like to know what the best way is to format the following layout:
(with eveything aligned and spaced neatly):
Here is the HTML:
<div class"wrapper">
<img alt="Image 1" src="images/image1.png" />
<div class="description">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
I tried the following but the vertical-align property does not seem to be working as I cannot align the top of the h1 with the top of the image:
img, div.description {
float: left;
}
div.description { margin-left: 10px; vertical-align: top; }
h1 { background: blue; }
p { background: red; }
What if instead of how the right hand side part is displayed below,
we wanted the right hand side to also be vertically centered instead
of being top aligned?
Here is the JSFiddle link:
http://jsfiddle.net/johngoche99/ZPKZj/1/
OK, to keep the text from dropping down below when the browser is resized it is necessary to specify the width of the wrapper element to something like 700px. Then it works.
Thanks.
in css you need to do this
img{
float: left;
height: 300px
}
div{
float: left;
}
h1{
padding: 10px;
background-color: #584480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
p{
padding: 10px;
background-color: #E24480;
color: #fff;
font-weight: normal;
font-size: 25px;
margin: 0 0 10px 10px;
}
nothing more ...
Hope this will help you ...
This can be accomplished with simple CSS.
img, div{
float: left;
margin: 10px;
}
http://jsfiddle.net/ZPKZj/2/
IRL, do NOT use this CSS. It is far too generic to be useful in any production environment. You might give your elements IDs or classes to allow the rules to be much more specific.
It looks you markup need a little change to be more, khm right;
HTML:
<div id="all">
<div id="sidebar">
<img class="side_image" alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div id="main">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
CSS:
#sidebar { float: left; }
#sidebar { margin-right: 40px; }
h1 {
margin-bottom: 30px;
margin-top: 0;
}
link to look how it will be:
http://jsfiddle.net/56Z7C/1/
I think you want something like this:
JSFIDDLE
You want to use css here. You will add an ID to the first div like <div id="wrapper"> this is your main div. Then in the second div you add <div id="headings"> for the headings. then in your css add the beneath code. (note: this isn't the best css code ever. but it works :))
html:
<div id="wrapper">
<img alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
<div id="headings">
<h1>Heading 1</h1>
<p>Paragraph 1</h1>
</div>
</div>
css:
#wrapper{
width: 960px;
margin: 0 auto;
}
#wrapper img{
float: left;\
margin-right: 40px;
padding-right: 40px;
}
#headings{
position: relative;
float: left;
}
h1{
margin-top: -5px;
}
Hope it helps!
Vertical-align only works on tables. If you want to do that with divs, you could try using display: table:
<div class="table">
<div class="row">
<div class="cell">
<img alt="Image 1" width="100" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
</div>
<div class="cell" id="stuff">
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</div>
</div>
</div>
And the CSS:
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
#stuff { vertical-align: middle; }
This has the advantage of not being dependent on sizes/margins of elements, but is unsupported in IE7 and below. As all things in life, display: table is a tradeoff.
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 have the following html/css code: http://jsfiddle.net/J3YZ8/4/
HTML:
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
html {
height: 100%;
}
body {
direction: rtl;
height: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
#headerDiv {
height: 20%;
margin-bottom: 1%;
}
#footerDiv {
height: 10%;
margin-top: 1%;
}
#headerDiv,
#footerDiv {
clear: both;
background-color: #FF5500;
}
#bodyDiv {
height: 68%;
margin: 0% 2%;
}
#loginContainer {
background: green;
margin-bottom: 1%;
}
#menuContainer {
background: blue;
margin-top: 1%;
}
#loginContainer,
#menuContainer {
display: inline-block;
width: 29%;
margin-left: 1%;
height: 49%;
}
#contentContainer {
width: 69%;
height: 100%;
background: yellow;
float: left;
margin-right: 1%;
}
If you use this code on your browser (without jsfiddle) you will see there is no margin between the blue div (menuContainer) and the footer. In jsfiddle the margin is not equal to the margin between the yellow div (contentContainer) and the footer although it should be the same. How can I fix it?
More details:
this is image from jsfiddle result:
this is image from full screen result:
Does anyone knows how to fix it??
I do see a margin below the blue panel.
A height of 100% the html element does not mean "not higher than the window". If you don't want to scroll the page you could set overflow:hidden on the html. But then you won't see the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
</div>
<div id="footerDiv">FooterPanel</div>
One of the main problems is that you have a second closing div with no opening - this can through IE in quirks mode and also cause other issues when working with floats and clears in CSS.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
Above is corrected code that should fix it - at least a start.
Are you looking to build a fluid height and width layout?
Also you need to clear the floats before you start the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div style="clear:both;"></div>
<div id="footerDiv">FooterPanel</div>
There is a working sample of the code maintaining your margin.