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! :)
Related
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;
}
EDITED: I have a div that takes up the left half of the window. Inside that div are two other divs. How do I stack the inner divs on top of one another, while floating both divs to the right. If you look at the JSFiddle, the two divs are side-by-side
http://jsfiddle.net/eka1ccsu/1/
What's the CSS property to place one div beneath another while the two divs are float: right?
Code:
#charset "UTF-8";
/* CSS Document */
#bdy{
font-family: Verdana, Geneva, sans-serif;
position: relative;
}
#left{
height: 100%;
width: 50%;
position: relative;
display: inline-block;
float: left;
bottom: 0;
}
#right{
width: 50%;
height: 100%;
display: inline-block;
float: right;
bottom: 0;
}
#nentry {
position:relative;
float: right;
margin-top: 100px;
}
#nuser {
position:relative;
float: right;
margin-top: 100px;
}
You can use clear: both; to set a floated element on a new line. Also, setting #right and #left to inline-block does nothing for your purposes. Setting the width and then setting the float property with put both elements side by side splitting the page in half.
Inline-block TYPICALLY is used for nav elements. Or for vertically centering objects in special cases.
http://jsfiddle.net/eka1ccsu/2/
I just took a literal take on your question, i float the parent of two div, so the child behave as block element.
<div style="float:right;">
<div id="nuser">
Add New User
</div>
<div id="nentry">
Add Entry
</div>
</div>
Im trying to make a picture display inline with text on it's right, AND at the same time positioned in the middle of the vertical axis to fit in the navigation bar.
At the moment, I can only get it to display inline but it always verges to the bottom of the bar rather than the top.
HTML:
<div id='profileBar'>
<img src='karl.png' width=25 id='profileBarPic'/>
Damen
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBarPic {
width: 25px;
display: inline;
float: left;
padding-right: 10px;
}
What it looks like:
Text next to an image? That's how images have always worked. You can get the desired affect with a lot less markup:
<div id='profileBar'>
<img src='http://placekitten.com/50/50' id='profileBarPic'/>
Damen
</div>
And CSS:
#profileBarPic {
vertical-align: middle;
}
Fiddle
A little explanation. img is basically an inline element to begin with, so adding float and display: inline is not necessary.
By default img aligns with the baseline of its container (the bottom edge of an image will align with the bottom of a text line it is next to). vertical-align changes where the img should align itself to (in this case, you wanted the middle).
Try uploading a fiddle next time, I think this should fix it though:
#profilebar {
float: right;
padding-right: 10px;
display: table-cell;
vertical-align: middle;
}
put your text into a span or something so that you can put a display:inline-block on both it and the <img>. This way, you won't need the float:left. Then apply a vertical-align:middle
so:
HTML:
<div id='profileBar'>
<img src='karl.png' width='25' id='profileBarPic'/>
<span>Damen</span>
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBar span {display:inline-block; vertical-align:middle; }
#profileBarPic {
width: 25px;
display: inline-block;
vertical-align:middle;
padding-right: 10px;
}
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 can't put this to work like it should, I'm not that good with CSS, I need you help!
I have a page like this:
<html>
<head><title>title</title></head>
<body>
<div id="page">
<div id="container">
<div id="head"><img src="..." alt="..." /></div>
<div id="content">
<div id="menu"><ul><li>...</li></ul></div>
<div id="content_body">stuff here</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
OK. My container div have a background color, I want that, as long as my text inside the content_body div expand, the background of the container div would expand too, but it is keeping a fixied height (it's just expanding the logo image height), and my text in the menu and content_body div is out of the background.
My CSS:
body
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
background-color: #333333;
background-image: url(Images/bg.png);
background-repeat: repeat-x;
color: #000000;
margin: 0px;
}
input
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
font-weight: bold;
}
h2
{
text-decoration: underline;
font-style: italic;
}
#page
{
width: 100%;
}
#container
{
overflow: visible;
width: 780px;
border: solid 6px #FFFFFF;
background-color: #DCDCCD;
margin: 0 auto;
margin-top: 15px;
}
#content
{
clear: both;
}
#menu
{
width: 240px;
display: block;
float: left;
}
#content_body
{
width: 500px;
display: block;
float: right;
}
What I'm doing wrong?
Everything in your #content div is floated, and well, floated elements don't really take up any space. Essentially since they are floated they are being taken outside of the regular stream of content and breaking the rules to be able to be pushed to the left or the right.
In order to get the div containing the floated elements to size with its content you could give is display: inline-block and maybe width: 100% so that it takes up the whole area...
#content{ display: inline-block, width: 100%; }
Giving it a display of inline-block makes everything outside of it think it is an inline-level element, but everything inside it is treated like it is a block-level element, and it ends up giving height to anything inside it that might be floated without having to give it a set height.
Try
#content
{
...
overflow: auto;
}
Edit:
Also make sure to add a width as DA points out in the comment below.
Try:
#footer{
clear:both;
}
demo