I'd like to achieve the following:
but it's bleeding from several wounds:
Can't close #div1 to top.
Can't give dinamic size (%) value to #div2, so like h3 and h4
What I can do so far:
http://jsbin.com/ivemal/30/
The html code:
<ul>
<li>
<div id="div1">
<h3> Title </h3>
<h4> SubTitle </h4>
</div>
<div id="div2">
...
</div>
</li>
<li>
...Same...
</li>
...
</ul>
I think the root cause I can't achieve this, is the rotated text. Can someone guide me, how to handle this problem?
Thanks in advance!
HTML
<div id="outer">
<div id="inner"> <div>
<h3>text</h3>
<h4>text2</h4>
</div>
</div>
<div id="inner2">Other text...</div>
</div>
I changed the span to a div because technically you cannot have block-level elements (i.e. headings) within a span.
CSS
html, body {
margin: 0;
}
#outer {
background: green;
}
#inner {
background:#e3e3e3;
height:100px;
width:50px;
float: left;
}
#inner > div {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
line-height: 0;
}
#inner2 {
margin-left:70px;
background:#e3e3e3;
}
#inner2::after {
display: table;
content: '';
clear: both;
}
See jsFiddle.
I don't know if I understood correctly, but is this what you want to obtain?
http://jsbin.com/ivemal/38/
Related
For my class I have to have 3 divs floated left in a row with the outer two half the size of the middle one. It's driving me crazy that the rows aren't centered on the page. Is there a way to center them without getting rid of the float?
I tried creating a container div with text-align just as a shot in the dark but that didn't work. All other research I've seen is to change the float to display but I have to use float so I can't do that.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.cover {
width: 20%;
}
div.author {
width: 50%;
font-family: calibri;
}
div.links {
width: 20%;
}
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<p class="link" onclick="parent.open('https://www.britannica.com/biography/Veronica-Roth')">
https://www.britannica.com/biography/Veronica-Roth
</p>
</li>
</ul>
</div>
Your instinct to wrap the 3 "columns" in a container div is correct. This allows you to use what is commonly referred to as the "clearfix" trick. Items that are "floated" are ignored by the normal box flow of the page which is why the container seems to collapse and ignore your floating contents.
Frustrating indeed!
This is the "clearfix":
div.container:after {
content: ''; /* no content in this pseudo element */
display: table; /* be 100% wide */
clear: both; /* clear the previous floats */
}
The :after pseudo selector on the container is the same thing as putting an empty div as the last item in the container. By clearing the floats, the container will wrap around the floating items.
This is a hack... but it works! The entire web development community has used this to "fix" the difficulties inherent with using floats for years to create layouts before the advent of real layout systems like Flexbox and CSS Grid.
After the container clears the floating items inside, just set the widths so that they add up to 100% and you are good.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.container:after {
content: '';
display: table;
clear: both;
}
div.cover {
width: 25%;
float: left;
}
div.author {
width: 50%;
font-family: calibri;
float: left;
}
div.links {
width: 25%;
float: left;
}
<div class="container">
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<a href="https://www.britannica.com/biography/Veronica-Roth">
Veronica-Roth
</a>
</li>
</ul>
</div>
</div>
div.container position:relative;
div.cover float:left;
div.autor put inside tag align="center"
div.links float:right;
or
div.autor margin:5%;
or
display:inline-block;
or you can use text-align:center; in css on the parent div and then display:inline-block; on each div inside the parent div
I have an <h3> element which I need to keep at width:100% so it remains clickable from JavaScript I have, but at the same time, I need the description to be positioned on the right side of the title in one line instead of the next line which usually works fine with display:inline-block, but not while the title keeps 100% width, obviously pushing to a new line.
h3.main.title {
width:100%
}
.main.title {
display:inline-block
}
.description {
display:inline-block
}
<div class="header">
<h3 class="main title">Category</h3>
<div class="description">
<p>Description</p>
</div>
</div>
https://jsfiddle.net/kk5he25q/
Any way I can achieve this?
If you really need to keep h3 at 100%, you can set the position of the description as absolute (don't forget to make the position of the parent div relative). However, keep in mind that h3 and description may overlap. See your updated jsfiddle here: https://jsfiddle.net/kk5he25q/1/
h3.main.title{width:100%; position:relative;}
.main.title {display:block;}
.description{display:block; position:absolute;right:10px; top:7px}
You could use float.
h3.main.title {
width: 100%;
}
.description {
float: right;
margin: 0;
}
<div class="header">
<p class="description">Description</p>
<h3 class="main title">Category</h3>
</div>
Something like this ?
*{
margin:0;padding:0;
}
.header {
display: flex;
}
h3 {
flex: 1;
border: 1px solid;
text-align: center;
padding:15px;
}
.description {
padding:15px;
border: 1px solid;
}
<div class="header">
<h3 class="main title">Category</h3>
<div class="description">
<p>Description</p>
</div>
</div>
I am trying to align my image with a title and a subtitle in a web page. I would like the image to be at the left and the title with its subtitle centered at the middle.
<header>
<div class="title_div">
<img src="pictures/logo.png" alt="logo"/>
<p>
<h1>Title</h1>
<h2>Subtitle</h2>
</p>
</div>
</header>
I tried to use the float:left attribute but the image goes out from the header... I saw that because I use the following css attributes:
header{
background:#f1f1f1;
border: black solid;
}
I would like to reach something like https://www.ted.com/ but with a subtitle under "Ideas worth spreading".
Using separate div for your logo and your text makes it much cleaner:
<header>
<div class="logo">
<img src="pictures/logo.png" alt="logo"/>
</div>
<div class="title_div">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</header>
CSS:
header{
float:left;
}
.logo{
float:left;
margin:20px;
}
.title_div{
float:left;
}
Note: Just a side note that you have very improper use of HTML. P tag is for paragraph, H1 is for headings, so you cant put heading inside a P tag. Re-structure your HTML.
This solution is similar to #user45250's but I'm using a vertical alignment technique for mutli-line text in respect to the image.
<header class="cf">
<img src="http://placehold.it/150x100" alt="logo">
<div class="title">
<h2>Title</h2>
<strong>Subtitle</strong>
</div>
</header>
/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
header {
background: #f1f1f1;
border: black solid;
}
.title {
height: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img, .title {
float: left;
}
I have used the micro clearfix as <header> will collapse as it's child elements have been floated.
JSFiddle
you can easily do this with the table display properties:
html clean up and valid ...
header {
display:table;
width:100%;
text-align:center;/* or was it just vertical-align ? */
border:1px solid
}
header>div {
display:table-cell;
vertical-align:middle;/* or was it just text-align ? */
}
.title_div {
width:1%;
}
<header>
<div class="title_div">
<img src="http://dummyimage.com/100x100/&text=logo" alt="logo" />
</div>
<div>
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</header>
I have a main div with 2 divs inside it, and a secondary div. To get the divs inside the main to be in the poisition i wanted them to be i set position to relative and it worked but the secondary div is now above the main div(in the browser) for some reason. I probably used position wrong, if someone can correct my it will help me a lot.
#main {
position: relative;
}
#right {
float: right;
position: relative;
display: inline-block;
}
#left {
float: left;
position: relative;
displayLinline-block;
}
#subDiv {
position: relative;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
browser shows:
<div id="subDiv">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
what's my mistake?
You need to wrap a clearfix around the 2 floating divs. Also, display inline-block is used instead of floating, not in additon too. You also have a typo in your css "displayLinline-block;" but that could just be your example.
You can make a new class like such:
.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}
and then wrap all your floated elements in a classed called "cf" and this will fix your issue.
<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->
<div> another div with more content that is not interferred with content above. </div>
It's not entirely clear what look you are trying to achieve but it sounds as though you need to clear the floats.
There are multiple methods of clearing which are detailed in THIS Stack Overflow question
#left,
#right,
#subDiv {
height: 50px;
}
#left {
float: left;
width: 50%;
background: red;
}
#right {
float: left;
width: 50%;
background: blue;
}
#subDiv {
background: green;
clear: both;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
Clear divs of floats. Also, be careful that you have a typo in the CSS. "displayLinline-block".
Sorry for the title, this is hard to explain in one sentence. Basically, I have a div container with two divs: 1 image that is float:left(ed) and another one with text. Here is what it looks like:
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage">
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
And here is a fiddle of what I am doing:
http://jsfiddle.net/qMQL5/880/
I want to add padding to the p part of the div with the text. As you see, I added margin-left:50px to #second p but it doesn't do anything. Basically, I want to "indent" the text "First Person Shooter" but I am having trouble doing this. Any ideas?
Update:
This is the result of your actual code now:
So, as you can see it is applying, but you have to know a few things:
img tag is an inline element
The IMG element embeds an image in the current document at the
location of the element's definition. The IMG element has no content;
it is usually replaced inline by the image designated by the src
attribute, the exception being for left or right-aligned images that
are "floated" out of line.
since you are floating the img tag it will start behaving like an inline-block element
Floating an inline or block level element will make the element behave
like an inline-block element (from here).
So, therefore, there is a few solutions to fix this issue:
Solution #1
(a quick fix [as you can see by adding a border to your #container]- I would advise to read the other solutions below)
only using you existing HTML markup and CSS:(which will make both <h1> and <p> indented)
make your img an block element by applying display:block (optional - to fix gap below img tag)
removing margin-left from p and adding margin-right to img
#container {
border:1px solid red
}
#gameImage {
width: 100px;
float: left;
height: auto;
display:block; /*new - optional*/
margin-right:10px /*new*/
}
#second {
background-color: green;
}
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #2
Since you are using float already, let's go with clearfix
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#container {
background-color: green;
border:1px solid red;
}
#second {
float:left;
/* background-color: green; /*choose what block will have the background*/ }
#gameImage {
width: 100px;
float: left;
height: auto;
}
#second > p {
padding-left: 10px;
box-sizing: border-box;
<div id="container" class="clearfix">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #3
dropping the floats and using display:table/table-cell
#container {
display:table;
width:100%;
background-color:green;
border:1px solid red;
}
#container > div {
display:table-cell;
vertical-align:top;
}
#container > div:first-child, #container > div > img {
width:100px
}
#container > div > img {
display:block
}
#container > #second > p {
padding-left:10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #4
using inline-block
#container {
width: 100%;
background-color: green;
font-size: 0;/* fix for inline-block elements gaps*/
border:1px solid red;
}
#container > div {
display: inline-block;
vertical-align: top;
font-size: 16px /* fix for inline-block elements gaps*/
}
#container > div:first-child,
#container > div > img {
width: 100px
}
#container > div > img {
display: block
}
#container > #second > p {
padding-left: 10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
NOTE:
You may want to take a look at some articles regarding floats, here and here
Your margin on #second must be as large as your image (100px) + the padding you want. Try with margin-left: 150px you will see.
Just use the space well with giving width to each element. You can give width as px or in % . You can try this
#second {
background-color: green;
float:left;
width:80%;
}
The non-floating element actually takes the entire width of the frame.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
padding-left: 50px; /*nothing happens visually*/
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
To fix it you could simply set overflow:auto on it.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
overflow: auto;
padding-left: 50px;
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
I'm not exactly sure what you're trying to achieve with the green box, but If you're just looking to keep things as they are, you need to make the <p> element and inline-block element so that it respects the floating <img> element and doesn't just wrap around it.
#second p {
display: inline-block;
margin-left: 10px;
}
http://jsfiddle.net/0za19kcx/