I want to achieve a layout like below using fix width. The width should be 600px and then I want to have some sections in the main div. And I want that the main div is aligned at the center of the page.
Im a CSS beginner and Im not achieving this result, I have a fiddle with the issues: fiddle
Its not aligned at the center of the page and also only the div .post-title is appearing properly.
Do you know what is necessary to achieve the image layout?
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div>
<div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
I updated your fiddle.
Here is the CSS in case it didn't work. Using flexbox.
.wrapper{
width: 600px;
display:block;
margin: auto;
border:1px solid gray;
text-align:center;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:left;
}
.post-info{
width:100%;
display: flex;
height: 100px;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
flex: 1;
box-sizing:border-box;
text-align: left;
}
.post-admin{
padding:20px;
box-sizing:border-box;
text-align: left;
flex: 1;
}
.post-category{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
.post-tags{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
You don't need to float everything, in fact it makes it very difficult to handle elements under your box because the floats get ripped from the document flow. Also the parent container no longer recognizes the size of the elements. You could instead use flexbox for the two elements next to each other, but for better compatibility you can also just make them inline-block.
I would wrap everything in another block (possibly just the body body if that works for you) with width: 100%; (or at least something larger than 600px) and then use margin: 0 auto; (0 top and bottom, auto left and right). I used inline-block for the date and admin blocks. Also not that you must remove the whitespace between them (I used an html comment) so they don't break.
body {
width: 100%;
}
.wrapper{
width: 600px;
display:block;
border:1px solid gray;
text-align:center;
margin: 0 auto;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:center;
}
.post-info{
width:100%;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-admin{
padding:20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-category{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
.post-tags{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
<body>
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div><!--
--><div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
</body>
Related
Good morning guys. I just want to know how to do this in html and css. :)
I've done this so far in my website.
I've been working for this for days but I can't find an exact way to do it that way.
This is my html code:
<div class="container">
<div class="col-md-2 col-md-offset-1"><img class="img-circle img-left" style="border: 5px solid #0766dc;" src="1.png"></div>
<div class="col-md-2" id="gradient1"></div>
<div class="col-md-2"><img class="img-circle img-center" style="border: 5px solid #00afdc;" src="2.png"></div>
<div class="col-md-2" id="gradient2"></div>
<div class="col-md-2"><img class="img-circle img-right" style="border: 5px solid #28ddb3;" src="3.png"></div>
</div>
and this is my css:
#gradient1 {
display: block;
background: linear-gradient(to right, #0766dc, #00afdc);
height: 5px;
margin-top: 100px;
}
#gradient2 {
display: block;
background: linear-gradient(to right, #00afdc, #28ddb3);
height: 5px;
margin-top: 100px;
}
.img-center {
margin: auto;
}
.img-right {
margin-right: auto;
}
.img-left {
margin-left: auto;
}
.img-circle {
display: block;
padding: 10px;
border-radius: 50%;
width: 200px;
height: 200px;
}
This is a simple code that works. You will have to resize the elements to your desired size, recolor, etc.
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 2</p></div>
<div style='height:30px; width:50px; border-bottom:1px solid black; float:left'></div></div>
<div style='height:60px; position:relative; width:60px; border:1px solid black; border-radius:60px; vertical-align:middle; text-align:center; float:left; '><p style='position:absolute; margin:0px; padding:0px; top:50%; left:50%; transform: translate(-50%, -50%);'>Hi # 3</p></div>
When resizing, make sure that you make the border radius the same as your height and width size. Note that the line div height is half the circle div height.
Your code when I run it does not look like the picture provided. The lines are almost halfway inside the circle to their left.
You can try something like this:
<div class="circle"></div><div class="line"></div><div class="circle"></div>
.circle {
height: 100px;
width: 100px;
border: 4px solid black;
border-radius: 50%;
display: inline-block;
box-sizing: content-box;
}
.line {
display: inline-block;
border-top: 4px solid black;
width: 100px;
height: 50px;
box-sizing: content-box;
}
Make sure you have no spaces between html inline or inline-block elements.
Add circles and change the sizes, colors, etc. at will. You'll probably want to wrap it all in a div with a minimum width so that the elements don't wrap when the screen gets small.
You were so close! :) But for custom things like this bootstrap is very unflexible, so sometimes you have to overwrite some properties.
So, problem is that bootstrap sets a padding on it's elements, that is the reason of the space between your circles:
To solve this issue just make a new class:
<div class="col-md-2 outer">
And apply the style like this:
.outer {
padding:0;
}
Another problem I see in your code is that you set the image width and height manually. But the divs with the class col-md-2 adjust their size depending on the screen size. So resizing can result in overlapping.
So you have to think about, if you set also the width / height of .outer to static values. To prevent this you can at least set the min-height and min-width of the div that have the circle inside.
Check out the solution on jsfiddle:
https://jsfiddle.net/w58L7ojL/ (zoom out to see it working)
I'm working on a practice project and I'm facing a problem. There is a border box with the border cut off near the text and the button. I shall appreciate it if you people can tell me how to make a box like that. I tried several methods but they were not good at different viewports.
Take a look. Workinglink
HTML:
<div>
<h1>Title</h1>
</div>
CSS:
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Here is one way you can do it.
Using "margin" in CSS you can do it.
<div class="back-box">
<div class="second-box">
<div class="text-box">
<h2>
My Text here
</h2>
</div>
</div>
</div>
CSS
.back-box{ background-color: black; width: 500px; height: 200px; padding: 50px }
.second-box { border: 1px solid white; width: 500px; height: 200px }
.text-box{ background-color: black; margin-top:-30px; width:200px; margin-left:auto; margin-right:auto; text-align: center }
h2 { color: white; }
I have a three column site that will display all three columns or just one. If it displays just one column, my example below is the column it will be displaying. This intro wrapper is the center column that needs to grow in the event that the columns to the left and right of this wrapper are not present. Specifically, the first div in the intro wrapper. The second div has a static image in it and should not change.
I've used min/max-width but the content never reaches the maximum but rather stays at the minimum.
.intro is the wrapper. The min-width for this wrapper should be 801px and can grow up to a max of 1200px. The first inner div (.intro-left) should be a minimum of 531px and can grow up to a maximum of 979px.
Can someone have a look and tell me where I'm going wrong?
Here is my code.
.intro{
float:left;
min-height:200px;
width:801px;
padding:10px 0;
}
.intro .intro-right{
display:inline;
float:left;
height:200px;
width:250px;
background:#ccc;
}
.intro .intro-right img{
height:190px;
width:240px;
margin:5px 0 0 5px;
border:1px solid #777;
}
.intro .intro-left{
display:inline;
float:left;
width:531px;
min-height:200px;
margin-right:20px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>test</p>
</div>
<div class="intro-right">
<img alt="" src="1.jpg">
</div>
</div>
display:table solves your issue,. here is the CSS, ive made some changes while testing that you may want to remove.. such as making the left div resizeable so that you can see it work in action.
div.intro {border:2px dotted red;
min-height: 200px;
max-width:1200px;
min-width:801px;
padding: 10px 0;
margin:0 auto;
display:table;
}
.intro-right, .intro-left{display:inline-block;vertical-align:top;}
.intro-right {
height: 200px;
width: 250px;
background: #ccc;
outline: 2px solid green;
}
.intro-right img {
height: 190px;
width: 240px;
margin: 5px 0 0 5px;
border: 1px solid #777;
}
.intro-left {
width: 531px;
height: 200px;
margin-right: 20px;
outline: 2px solid blue;
resize:both;
overflow:auto;
}
I have a design where I need to align a header to some content in another column.
The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.
(The below is just some demo code to highlight my issue)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
Please see
http://jsfiddle.net/bmxSY/
So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.
EDIT*
The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}
The easiest method is with display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/
.container {
text-align: right;
}
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
Actually it is not possible, but by tricking, we can do it.
.outer {
position:relative;
display:table;
height: 200px;
width: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #CCCCCC;
background:red;
float:left
}
.inner {
width:100%;
display:table-cell;
vertical-align:bottom;
position:relative;
}
p{background:blue;border:1px solid #000}
Demo: http://www.pmob.co.uk/temp/vertical-align9.htm
Use table-cell to align the div o the bottom of the parent.
unfortunately dispaly:table-cell doesn't support margin option so you need to manipulate it through border.
CSS
.container{display:table-row; float:right}
.header-container
{
width: 200px;
font-size: 1.4em;
border-right:20px solid white; border-left:20px solid white;
border-top:10px solid white; border-bottom:10px solid white;
border-bottom: 1px solid #bbb;
display:table-cell; vertical-align:bottom
}
DEMO
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.