I have a box and I want to type a h2 top of that box, which floated right. I want h1 to be in the middle of the box and top of that (I mean center of outside of the box).
Thanks!
Html
<h1>News</h1>
<div class="box"></div>
CSS
.box {
width: 400px;
height: 200px;
background-color: red;
}
Hope this was what you asked for:
Next time look at How to ask before asking a question on Stackoverflow, to make a good question that developers understand. You should also google before asking and see if you could solve your problem by yourself first. If you google float you get this as the first hit and get an example how to use it: CSS Float property
.box {
width: 400px;
height: 200px;
background-color: red;
}
.txt-box > .box{
display: block;
}
.txt-box {
display: inline-block;
text-align: center;
}
h1 {
margin: 0;
}
h2 {
float: right;
}
<div class="txt-box" >
<h1>News</h1>
<div class="box">
<h2>Box text</h2>
</div>
</div>
your question didn't full go into detail of the problem you were facing, but here is a way of approaching this specific H1 tag.
html:
<h1 class ="news-h1">News</h1>
<div class="box"></div>
css:
.box {width: 400px; height: 200px; background-color: red;}
.news-h1 {float:right;}
Related
I'm trying to centering my paragraph with table, table-cell and vertical-align. For some reason, it doesn't work. Check my code please.
html
<div class="a">
<img src="http://dummyimage.com/600x400/000/fff" alt="">
<div class="b">
<p>sdfsdfsdfsdfsdfs</p>
</div>
</div>
css
.a {
display: block;
float: left;
height: 100%;
min-height: 1px;
width: 334px;
background: red;
}
.a > * {
float: left;
}
Edited Fiddle http://jsfiddle.net/k73xfayx/ here
The outer element has to have display: table, the inner ones table-cell
I put another DIV around your img (class c) to get that structure: One surrounding DIV (a), two DIVs inside that (c and b), one of them containing the img, one a p-Tag with text.
Your code does not seem to include any <table> tag at all.
I am sorry if I have misinterpreted your question.
If you have changed it, then could you please edit your question and post your code's previous version in it.
This will help people having a similar question.
This is what I currently see:
<div class="a">
<img src="http://dummyimage.com/600x400/000/fff" alt="">
<div class="b">
<p>sdfsdfsdfsdfsdfs</p>
</div>
</div>
Styling:
.a {
display: block;
float: left;
height: 100%;
min-height: 1px;
width: 334px;
background: red;
}
.a > * {
float: left;
}
Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?
I've been banging my head for days over this and tried everything I could possibly think of.
This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.
CSS
html, body {
width: 100%;
height: 100%;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-cell;
}
.col-left, .col-right {
float: left;
width: 50%;
height: 100%;
}
/*--this should be vertically centred--*/
.content {
}
HTML
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>SOME TEXT</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="SOME IMAGE URL">
</div>
</div>
</div>
</section>
JSFiddle
.row {
...
display:table-row;
}
.col-left, .col-right {
...
display: table-cell;
vertical-align: middle;
}
Demo
You were 95% of the way there as you laid out the structure using display:table, and display:table-cell, but you floated what should have been display:table-cell, and set table-cell on what should have been table row. Use this instead:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-row;
}
.col-left, .col-right {
display:table-cell;
width: 50%;
height: 100%;
vertical-align:middle;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
you can try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table;
}
.col-left, .col-right {
float: left;
display:table;
vertical-align:middle;
width: 50%;
height: 100%;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
display:table-cell;
vertical-align:middle;
height:100%;
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
For anyone interested in this topic, this issue and the answers provided raised in me another question regarding which method to apply in this situation, and in fact, for building columns in general: Floating or Display property. For any newbie or self-taught wannabe developer like my self may be interesting to know what I've concluded after research and testing.
I find my self often using different methods for building columns that revolve around Floating the elements and in one way or another always require some hacking in the end to do exactly what I want, leaving me with a feeling of inconsistency and unreliability.
One would think that something so vital for layout structure would have at this point in time some obvious, elegant and simple solution. Apparently it has, and it's called Display Table. It might have limitations in some very specific situations but in general it's all you need. It's rock solid and you can pretty much do anything you want with it. Unfortunately, I think the word "table" is still a kind of taboo. This method however is simple, comprehensible, reliable and doesn't require any hacks to behave as expected. Vertical alignment which is always a struggle is also made easy this way.
A simple structure like this is all you need:
.container {
display: table;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
For some reason (probably because of the nasty word "table"), you wont be able to find this method suggested anywhere with a simple search on basic css columns.
I thought this articles on the subject were interesting:
Give Floats the Flick in CSS Layouts
Farewell Floats: The Future of CSS Layout
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I have a very simple design where I have 4 small boxes lined up on top of one another each with the same dimensions. However, when I try to apply "float: left" to the boxes, the background color of it's parent div goes away. Why is this? What does it have to do with the background color? I would just like my background color to remain the same.
See jsfiddle: http://jsfiddle.net/mush5ecc/
My html code:
<div id="careers">
<div class="container">
<h2 id="careers_title">Careers</h2>
<div id="four_grids">
<div id="top_left" class="grid"></div>
<div id="top_right" class="grid"></div>
<div id="bottom_left" class="grid"></div>
<div id="bottom_right" class="grid"></div>
</div>
</div>
</div>
My CSS code:
#careers {
background-color: orange;
}
.container {
width: 1026px;
margin: auto;
}
#careers_title {
text-align: center;
padding-top: 67px;
padding-bottom: 60px;
}
.grid {
width: 50px;
height: 50px;
float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
}
#top_left {
background-color: blue;
}
#top_right {
background-color: green;
}
#bottom_left {
background-color: red;
}
#bottom_right {
background-color: yellow;
}
Apply overflow: hidden to <div id="four_grids">.
See here for further details on this behaviour.
I'm a bit unsure of what your goal is, but I added the following css and I think this may be what you are looking for.
#four_grids {
position: absolute;
}
I'm somewhat experienced in html/css coding, but more in the "old school" sense.
My question: When I use display: inline-block on two divs, they stack on top of each other, despite the fact that they have a defined width and height. and lots of room to float beside.
Any advice would be greatly appreciated.
(I would attach file to view but it is long, more than willing to zip and send for help)
Cheers
Please see this simple example may be help you to resolve your problem.
Here is a sample div, add this to your code base and see the output
<style type="text/css">
.te {
display: inline-block;
border: solid #0000FF 1px;
width: 100px;
height: 100px;
}
</style>
<div style="text-align: center;">
<div class="te">
hello
</div>
<div class="te">
hello there
</div>
</div>
Demo Fiddle
You can just float them left.
css:
.block1 {
display: inline-block;
float: left;
background-color: blue;
width: 100px;
height: 100px;
}
.block2 {
display: inline-block;
float: left;
background-color: green;
width: 100px;
height: 100px;
}
html:
<div class="block1"></div>
<div class="block2"></div>
JSFiddle demo