I have a div. It is 100% width and 150 pixels tall. I nested an <h1> tag in it, and it sits under an image instead of next to it.
<body>
<div class='topbar'>
<img src='img source is here'/>
<h1>
GO COSMOS!!!
</h1>
</div>
</body>
CSS:
body {
background-color: #aaffaa;
}
.topbar {
width: 100%;
height: 150px;
background-color: #00bb00;
}
img {
height: 150px;
width: 150px;
}
h1 {
}
A heading (<h1>,<h2>,etc) is a block level element:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.Source: MDN Docs
Simply display the h1 inline-block like:
h1 {
display: inline-block;
vertical-align:top;
/*vertical-align aligns it at the top of the image, instead of the baseline*/
}
JSFiddle Example with your code
All header tags are block by default, meaning it spans the width 100%. If you want it side-by-side another element you need to change the display like so:
h1 {
display: inline;
}
Another option would be to float the two inside elements left. See fiddle: https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/
img {
float: left;
height: 150px;
width: 150px;
}
h1 {
float: left;
}
Related
I have a parent div that contains text and a logo. These two elements are supposed to appear next to each-other, on the same line.
Despite having floated both elements to the left, adding code to have both image and parent container display inline, and having made sure the parent element is wide and tall enough to contain the image, the image is collapsing under the text.
HTML:
<div class="heading"><h1>Stanford Connection</h1><img src="tree-logo.gif" alt="Stanford Logo" id="logo"/></div>
CSS:
.heading {
width: 800px;
background-color: #9A0000;
color: white;
font-size: 20pt;
float: left;
overflow: hidden;
display: inline-block;
}
#logo {
float:left;
display: inline-block;
}
The problem is that you haven't truly floated both elements to the left. You've floated .heading and #logo to the left, but floated elements should be siblings. As such, .heading would float to the left of any sibling element, and h1 isn't set to float at all.
To align your images, all you need to do is float h1 to the left as well:
.heading {
width: 800px;
background-color: #9A0000;
color: white;
font-size: 20pt;
float: left;
overflow: hidden;
display: inline-block;
}
h1, #logo {
float: left;
}
<div class="heading">
<h1>Stanford Connection</h1><img src="http://placehold.it/100" alt="Stanford Logo" id="logo" /></div>
Note that depending on where exactly you want the image to sit, display: inline-block may suit better.
Hope this helps! :)
I'm trying to place two div horizontally, but one the content of the second div exceeds the height of the first one i get bad results:
Here is my Html code:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body>
<div class="container">
<div class="yellow">sometext</div>
<div class="green">more text here more text here more text here more text here more text here more text here more text here more text here more text here more text here </div>
<div class="spacer"></div>
</div>
</body>
and this is my Css:
.yellow {
background-color: yellow;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: #00ff00;
}
.container {
width: 30%;
}
.spacer {
clear: both;
}
The result i want is this:
but this is what i get:
Why not make the container background the same colour as your first div and change the CSS to:
JSFiddle here
.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: yellow;
overflow: hidden; <-- added
}
.container {
width: 30%;
background-color: #00ff00; <-- added
}
.spacer {
clear: both;
}
Although float is commonly used for layout purposes like this, it was originally designed to float text elements. This is the reason for why floated divs behave in a strange manner when ones not familiar with it.
Beside the text formatting issues there is actually another difficulty when you want two floated elements have the same automatic height. This could be achieved much better by using the display property with table and table-cell.
Have a look at this:
CSS for HTML dynamic layout with not fixed columns?
Or just take the regarding fiddle:
http://jsfiddle.net/TfuTE/
I think restricting .container to has a specific background-color may be cumbersome.
I suggest using display: table for parent element and display: table-cell for children to get rid of this issue.
Just add following lines in your stylesheet:
.container {
display: table;
height: 100%;
}
.container > div {
display: table-cell;
height: inherit;
vertical-align: top;
}
Here is a JSBin Demo
if you make a blocklevel element float your element won't be height and width 100% but as big as it's content, or as big as you set it with css.
you could give it a height with css
you could give the yellow div a margin-left: 104px
Here is the jsfiddle
In my example, giving either of the children elements a bottom margin causes its sibling to be pushed down by whatever margin I specify; I hadn't anticipated seeing anything move since the container is larger than each div. Why is this the case?
HTML
<div class=container>
<section></section>
<aside></aside>
</div>
CSS
.container {
background: whitesmoke;
height: 12em;
width: 12em;
}
.container section {
background: slategray;
display: inline-block;
height: 04em;
margin-bottom: 20px;
width: 04em;
}
.container aside {
background: gold;
display: inline-block;
height: 04em;
width: 04em;
}
Add vertical-align: top to your section element. As these elements are ìnline-block, they are not simply behaving as boxes anymore - they have flowing text properties. It is not really the margin that is pushing down the other element, it is the default vertical-align property they have.
jsFiddle Demo
Other Demo that shows the effect with text - the key is vertical-align
Here is what I am trying to do: I have a <h1> element, a <time> element, and a <div>, all within a <header> that is the full width of the browser window. The <h1> element needs to be on the left, the <time> element, which changes width with the time, needs to be centered, and the <div> needs to be on the right.
I have been trying to work this out for a while but haven't had any luck. Perhaps it requires some javascript? I also need to be able to (I think using absolute positioning?) vertically center align them all, and they are all different font sizes.
Heres the HTML so far:
<header>
<h1>blahblah.com</h1>
<time>THE TIME</time>
<div id="controls">
DISPLAY CONTROLS
</div>
</header>
and the CSS:
* {
margin: 0px;
padding: 0px;
}
header {
background: black;
color: white;
width: 100%;
font-family: wendy;
}
header h1 {
display: inline-block;
font-size: 40px;
margin-left: 10px;
}
header time {
font-size: 30px;
}
header #controls {
display: inline-block;
}
#controls p {
display: inline-block;
font-size: 20px;
}
Thank you very much!
Time is an inline element, so text-align: center for the header is enough to get the time centered. Further, get rid of those unnecessary inline-block styles.
And then the base aligning style sheet shrinks to this fiddle example:
header {
width: 100%;
overflow: hidden;
text-align: center;
}
header h1 {
float: left;
}
header #controls {
float: right;
}
Overflow is added to assure extending the height of the header to that of the floated elements , whichever is tallest.
I have a HTML code as;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
My CSS is as follows;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)
I tried the standard way of using margin:auto, but that is not working.
Also I want to avoid using text-align:center.
Is there some other way of fixing this?
You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.
You could give the span a set width, then add the margin:0 auto again. This would center-align it.
.left
{
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt
{
display:block;
width:100px;
height: 100%;
margin: 0 auto;
}
If you know the width of the span you could just stuff in a left margin.
Try this:
.center { text-align: center}
div.center span { display: table; }
Add the "center: class to your .
If you want some spans centered, but not others, replace the "div.center span" in your style sheet to a class (e.g "center-span") and add that class to the span.