Basically I'm wondering if you can position 2 elements relative to each other.
I have a h1 and h2 inside a div, I want to align the h2 to the right side of the h1
html
<header>
<div>
<h1>Header with some text</h1>
<h2>Other header</h2>
</div>
<div>
</div>
<div>
</div>
</header>
css
header {
width: 960px;
}
div {
width: 318px;
float: left;
border: 1px solid red;
min-height: 200px;
}
h1, h2 {
font-size: 16px;
}
The simplest solution is to wrap the headings in an extra inline-block div and the apply text-align:right.
.parent {
width: 80%;
border: 1px solid red;
}
.wrap {
display: inline-block;
text-align: right;
}
<div class="parent">
<div class="wrap">
<h1>
I'm a really long h1 tag
</h1>
<h2>
Short h2 tag
</h2>
</div>
</div>
use this code
.some_class > * {
display:inline-block;
}
<div class="some_class">
<h1>some text</h1>
<h2> Some other text </h2>
</div>
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I need to display one paragraph aligned to the left, another paragraph aligned to the right, and a centered image, all on the same line on the footer of a webpage.
How do I achieve that? My current code gets the second paragraph on a new line.
HTML
<div id="footer">
<p class="alignleft">Text</p>
<img id="logo" src="#">
<p class="alignright">More text</p>
</div>
CSS
.alignleft {
float: left;
}
.alignright {
float: right;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
Hope this helps for you:
<div id="footer">
<span>Text</span>
<span><img src="http://www.klm.com/jobs/nl/images/icon_flight_32x32_tcm701-312701.gif" /></span>
<span>More text</span>
</div>
#footer {
width: 100%;
display: table;
table-layout: fixed;
background: gray;
}
#footer span {
display: table-cell;
}
#footer span:nth-child(2) { text-align: center; }
#footer span:last-child { text-align: right; }
JSFiddle DEMO
Here's what I ended up doing:
Enclosing the texts and images on DIVs,
Explicitly setting the width percentage of these DIVs to 33.333% (1/3rd) each,
Left-Floating these DIVs,
Using text-align to align the elements inside those DIVs.
No need to change the order of my HTML, and works with as many elements as needed, just changing the percentage value! :)
Code
HTML
<footer>
<div id="footerleft"><p>Text</p></div>
<div id="footercenter"><img src="./img/logo.jpg" alt="Logo"></div>
<div id="footerright"><p>More Text</p></div>
</footer>
CSS
#footerleft {
float: left;
width:33.333%;
text-align:left;
}
#footercenter {
float: left;
width: 33.333%;
text-align: center;
}
#footerright {
float: left;
width:33.333%;
text-align:right;
}
You need to rearrange your HTML:
<div id="footer">
<p class="alignleft">Text</p>
<p class="alignright">More text</p>
<img id="logo" src="#" />
</div>
DEMO
I want some divs to get their width from their content. Display:inline-block does this, but I also want the divs to be under each other, not next to each other as floated.
Using float:left instead of inline-block does this, but I want the divs to be center aligned, not left aligned. How can I do this?
on the parent div put white-space: pre-line;
on the child divs add clear : both
#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{
display: inline-block;
clear: both;
border: 1px solid grey;
margin: 3px auto 3px auto;
width: auto;
}
<div id="wrapper">
<div id="div1" class="clearfix">some content here that is bigger</div>
<div id="div2" class="clearfix">some content here</div>
</div>
http://jsfiddle.net/judsonmusic/8HCWp/
Working jsFiddle Demo
Consider the following markup:
<div class="container">
<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>
</div>
Because you want to align your elements, you must use inline, then we will break
them with :after:
.container {
text-align: center;
}
.text {
background: yellow;
display: inline;
}
.text:after {
content: '';
display: block;
}
As mentioned in this thread, there's also a flex solution to this problem:
#container > p {
border-bottom: 2px solid black;
}
#container {
display: flex;
flex-flow: column;
align-items: flex-start;
}
<div id="container">
<p>A text</p>
<p>A text</p>
<p>A longer text</p>
</div>
html is
<div>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
abc <div style="margin:4px auto;width:100px;">div1</div><br/>
</div>
and style sheet is
div{
border:1px solid;
padding:10px;
display:inline-block;
}
check demo at http://jsfiddle.net/xupHN/
Why are my h1 tags not styled, although they are simple descendant tags? Could you tell me, what I'm misunderstanding about inheritance in this case? The code is here.
HTML
<div id="title">
<div class="left"
<h1>Lala</h1>
</div>
<div class="right"
<h2>Lulu</h2>
</div>
</div>
CSS:
body {
font-family: Arial, sans-serif;
letter-spacing: 0.025em;
}
#title {
position: absolute;
left: 64px;
white-space: nowrap;
height: 60px;
background: #000;
}
#title > .left {
float: left;
height: inherit;
width: 380px;
background: #C2D;
}
#title > .right {
float: left;
height: inherit;
width: 124px;
margin-left: 4px;
background: #5CC;
}
h1 {
color: #FF4;
}
Hey now check to this
you forget to disclose div
Replace
this
<div id="title">
<div class="left"
<h1>Lala</h1>
</div>
<div class="right"
<h2>Lulu</h2>
</div>
</div>
into this
<div id="title">
<div class="left">
<h1>Lala</h1>
</div>
<div class="right">
<h2>Lulu</h2>
</div>
</div>
">" at the end to close the div
Live demo
http://jsfiddle.net/SPN6M/2/
In line 2 your code should read
<div class="left">
Note the ">" at the end to close the div
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari