I want to set three header div's 25% 50% 25% Horizontally, shown in image, have laid them three div's in header div with corresponding css, but the div's are placed vertically shown here.
Have checked with previous answers which I couldn't get a lead, give me a directions please! Thanks
HTML code:
<div id="header">
<div id="header-left" class="div-border">
<h6 align="center">Image holder</h6>
</div>
<div id="header-middle" class="div-border">
<h1 align="center">Dashboard</h1>
</div>
<div id="header-right" class="div-border">
<h6>
<span >
<span style="line-height: 24px;" id="border-around">
<b>Profile | Help | Admin </b>
</span>
</span>
</h6>
</div>
</div>
CSS code:
#header {
background-color:#fecb00;
color:white;
text-align:center;
padding:5px;
}
#header-left {
width: 25%;
}
#header-middle {
width: 50%;
}
#header-right {
width: 25%;
}
.div-border {
border: 2px solid silver;
}
#border-around {
border: 1px solid #000;
}
You have to set box-sizing: border-box to include borders to width calculation, set display: inline-box to display elements inline, vertical-align: middle and eliminate white spacing between divs.
.div-border {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/khbv2mac/1/
Your elements are displayed as block elements by default, which means that they will take an entire 'line' to themselves unless floated. You can either float your elements, or display them inline-block.
The accumulated width of your three elements is wider than 100% of the width of the page, because their borders are not included in the width you specify. You can fix this by changing box-sizing.
Note: I have commented out the white-space between your inline-block elements. Because they are displayed inline, space between them will be acknowledged.
body{margin:0}
#header {
background-color:#fecb00;
color:white;
text-align:center;
}
#header-left {
width: 25%;
}
#header-middle {
width: 50%;
}
#header-right {
width: 25%;
}
.div-border {
/* Style changes here */
display:inline-block;
box-sizing:border-box;
border: 2px solid silver;
}
#border-around {
border: 1px solid #000;
}
<div id="header">
<div id="header-left" class="div-border">
<h6 align="center">Image holder</h6>
</div><!--
--><div id="header-middle" class="div-border">
<h1 align="center">Dashboard</h1>
</div><!--
--><div id="header-right" class="div-border">
<h6><span><span style="line-height: 24px;" id="border-around"><b>Profile | Help | Admin </b></span></span></h6>
</div>
</div>
JSFiddle
used to floating element as like this
*{ // add this line
box-sizing:border-box; // add this line
} // add this line
#header {
background-color:#fecb00;
color:white;
text-align:center;
padding:5px;
overflow:hidden; // add this line
}
#header-left {
width: 25%;
float:left; // add this line
}
#header-middle {
width: 50%;
float:left; // add this line
}
#header-right {
width: 25%;
float:left; // add this line
}
.div-border {
border: 2px solid silver;
}
Demo
you can try it using css order property .
code:
<html>
<head>
<style>
#header {
background-color:#fecb00;
color:white;
text-align:center;
padding:5px;
width:100%;
display: -webkit-flex; /* Safari */
display: flex;
}
#header-left {
width: 25%;
-webkit-order:1;
order:1;
}
#header-middle {
width: 49%;
-webkit-order:2;
order:2;
}
#header-right {
width: 25%;
-webkit-order:3;
order:3;
}
.div-border {
border: 2px solid silver;
}
#border-around {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="header">
<div id="header-left" class="div-border">
<h6 align="center">Image holder</h6>
</div>
<div id="header-middle" class="div-border">
<h1 align="center">Dashboard</h1>
</div>
<div id="header-right" class="div-border">
<h6>
<span >
<span style="line-height: 24px;" id="border-around">
<b>Profile | Help | Admin </b>
</span>
</span>
</h6>
</div>
</div>
</body>
</html>
fiddle : http://jsfiddle.net/invincibleJai/sbuveeLw/
Related
I have a container around two inline block elements. However the container collapses (the horizontal dashed line). How do I stop it from collapsing so that I can apply a background colour to the container. The structure is important and I want to avoid using flex-box. It is also important that the two coloured squares are right aligned and next to each other.
The aim is to create an absolutley positioned block element over a canvas element. With a descriptive name on the left and two buttons on the right. I have to work with what is there so a solution that involves as little change as possible would be great.
.header3 {
width: 300px;
background-color: lightgray;
border: 1px dashed grey;
position:relative;
}
.title3{
position:absolute;
top:0px;
left:0px;
display:inline-block;
vertical-align:center;
background-color:#bada55;
}
.list {
list-style:none;
margin:0px;
padding:0px;
border:1px dashed green;
position:absolute;
display:inline-block;
top:0px;
right:0px;
}
.item {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.item-1 {
background-color: orangered;
}
.item-2 {
background-color: skyblue;
}
<body>
<br>
<div class="header3">
<div class="title3">bollard name</div>
<ul class="list">
<li class="item item-1"></li>
<li class="item item-2"></li>
</ul>
</div>
</body>
Codepen here
This is happening because you absolutely positioned your .title3 and .list elements which remove them from the normal flow.
If you want to achieve this layout use float:right on your ul and insert a clear in your div (in the code below I achieved this using the::after:pseudo element of yourdiv`)
* {
font-family: "Helvetica";
}
/* list */
.header3 {
width: 300px;
background-color: lightgray;
border: 1px dashed grey;
position:relative;
}
.header3::after {
content: '';
display: table;
clear: both;
}
.title3{
display:inline-block;
vertical-align:center;
background-color:#bada55;
}
.list {
list-style:none;
margin:0px;
padding:0px;
border:1px dashed green;
float: right;
}
.item {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.item-1 {
background-color: orangered;
}
.item-2 {
background-color: skyblue;
}
<div class="header3">
<div class="title3">bollard name</div>
<ul class="list">
<li class="item item-1"></li>
<li class="item item-2"></li>
</ul>
</div>
The texts baseline of inline-block is not aligning at the bottom.
How do you align the radical at the bottom of inline-block instead of text bottom (baseline)?
Currently i have this
The goal is this
Current Code
https://jsfiddle.net/x9ugahdb/1/
.parent {
height: 200px;
}
.radical {
border: 1px solid #000;
display: inline-block;
vertical-align: bottom;
}
.radicalData {
height: 200px;
}
<div class="parent">
<span class="radical">√</span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>
You could treat the square root mark √ as content via an ::after selector. From there use position: absolute along with top: 6px to layer it over the bordered span.
HTML:
<div class="parent">
<span class="radical2"></span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>
CSS:
body {
font-size:28.8px;
font-family:"Symbola";
vertical-align:bottom;
}
.parent{
height:200px;
}
.radical {
border:1px solid #000;
display:inline-block;
vertical-align:bottom;
}
.radical2 {
border:1px solid #000;
display:inline-block;
height: 33px;
position: relative;
vertical-align:bottom;
width: 20px;
}
.radical2::after {
content: "√";
height: 33px;
position: absolute;
margin-bottom: -10px;
top: 7px;
z-index: 1;
}
.radicalData {
height:200px;
}
Working Fiddle here.
Add overflow:hidden to the second inline-block to move its baseline to the bottom then keep the default alignment:
.parent {
height: 200px;
}
.radical {
display: inline-block;
}
.radicalData {
height: 200px;
}
<div class="parent">
<span class="radical">√</span>
<span class="radical" style="overflow:hidden;">hello</span>
<span class="radicalData"></span>
</div>
You can also adjust the line-height like this:
.parent {
height: 200px;
}
.radical {
display: inline-block;
border:1px solid;
vertical-align:bottom
}
.radicalData {
height: 200px;
}
<div class="parent">
<span class="radical" style="line-height:12px;">√</span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>
I am working on a new project and have run into the problem that when I add borders to my div tag the div shifts down so that it is no longer in the borders.
div {
height: 50px;
width: 50px;
text-align: center;
font-size: 30px;
line-height: 50px
}
.gases {
background-color: limegreen;
}
.blocks {} .border {
border: 5px solid black;
}
<div class="border">
<div class="periodOne groupOne gases blocks" id="hydrogen">
<p>H</p>
</div>
</div>
There's likely some margin set on your p tag. Try adding the below line of CSS to remove the margin.
.border p {margin: 0;}
JSFiddle: https://jsfiddle.net/5w6jt0ru/1/
.border { display: inline-block}
.blocks {
height: 50px;
width: 50px;
text-align: center;
font-size: 30px;
line-height: 50px;
}
.gases {
background-color: limegreen;
}
.blocks {} .border {
border: 5px solid black;
}
p {margin: 0}
<div class="border">
<div class="periodOne groupOne gases blocks" id="hydrogen">
<p>H</p>
</div>
</div>
remove the p tag (causes extra margins), separate the div rule into separate rules for the two divs and be careful to use things like line-height etc. only in one of those elements. Here's the code:
.a {
height: 50px;
width: 50px;
}
.b {
text-align: center;
font-size: 30px;
line-height: 50px
}
.gases {
background-color: limegreen;
}
.border {
border: 5px solid black;
}
<div class="a border">
<div class="b periodOne groupOne gases blocks" id="hydrogen">
H
</div>
</div>
By user agent stylesheet, element have default margin-top and margin-bottom, you need to remove them.
div {
height:50px;
width:50px;
text-align:center;
font-size: 30px;
line-height:50px
}
.gases {
background-color:limegreen;
}
.border{
border:5px solid black;
box-sizing:border-box;
}
.border p{
margin: 0;
}
<!-- remove p element default margin-top and margin-bottom -->
<body>
<div class="border">
<div class="periodOne groupOne gases blocks" id="hydrogen">
<p>H</p>
</div>
</div>
</body>
I've been trying to find a solution to this for days, but haven't found anything that works.
I thought I'd finally make an account on this great website, so here goes:
I am trying to have a div expand from left to right, with 170px of clearance on both sides.
However, when there is no content on the page, or only a few words, the div doesn't expand.
I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.
I hope you can be of help, my code is posted below:
Thanks in advance,
Chris
the html:
<html>
<body>
<div id="wrapper">
<div id="pagetopwrap">
</div>
<div id="pagemainliquid">
<div id="pagemainwrap">
<div id="content">
<div id="headerwrap">
<div id="header_left">
</div>
<div id="header_main">
<div id="logo_row">
<p id="logotext">Site Title</p>
</div>
<div id="menu_row">
<!-- irrelevant menu button code -->
</div>
</div>
<div id="header_right">
</div>
</div>
<div id="contentbody">
<div id="contenttext">
<p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
the css:
It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #0f0f0f; /* is normally an image */
}
#wrapper {
width: 100%;
min-width: 960px;
max-width: 1920px;
margin: 0 auto;
height: 100%
}
#pagetopwrap {
height: 50px;
width: 100%;
float: left;
margin: 0 auto;
}
#pagemainliquid {
float: left;
}
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
}
#leftcolumnwrap {
width: 170px;
margin-left:-100%;
float: left;
}
#leftcolumn {
margin: 5px;
}
#rightcolumnwrap {
width: 170px;
margin-left: -150px;
float: left;
}
#rightcolumn {
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
bottom:50px;
}
#footer {
height: 0px;
margin: 5px;
}
#headerwrap {
width: 100%;
margin: 0 auto;
}
#header_left {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
float:left;
}
#header_right {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
margin-left: 0px;
float:right;
position:relative; top:-200px;
}
#header_main {
background-color: #00ff00; /* is normally an image */
margin-left: 25px;
margin-right: 25px;
height:200px;
background-size: 100% 200px;
}
#contentbody {
background-color: #E2E2E2;
border-radius: 10px;
margin-top:10px;
border: 1px solid #A7A7B2;
}
#contenttext {
margin-left:10px;
margin-right:10px;
}
#logo_row {
height:150px;
width:100%;
float:left;
}
#logotext {
margin-top:20px;
margin-left:10px;
vertical-align: middle;
font-size: 55px;
font-family: "Arial Black", Arial;
}
#contenttextmakeup {
margin-top:12px;
margin-left:10px;
vertical-align: middle;
}
#menu_row {
width:100%;
}
button.menubutton {
/* irrelevant button markup */
}
http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)
Instead of using !important, save yourself a headache in figuring out why important works.
CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)
For example, if I styled something like so
#container .red { width: 50% }
updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.
Fixed here http://jsfiddle.net/w9qLh6tp/1/
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
width: 100% !important; // set it highest priority
border: 3px red solid; // border is set just for demonstration
}
set the width to be 100% with priority (!important) that will override any other css styling.
I have written tabular structure using DIV controls. It shows data correct only when column values have same length of characters. If column values have different number of characters then column gets enlarge itself to accommodate all characters in a column. How to set FIX width of each column DIV?
I have following HTML DIV structure:
<body>
<div class="ParentContainer">
<div id="row1" class="row">
<div>
<label id="row1_to" class="divLabel">contact1#test.com
</label>
</div>
<div>
<label id="row1_from" class="fromLabel">test1#something.com
</label>
</div>
<div>
<label id="row1_subject" class="subLabel">Need to create new organization1
</label>
</div>
</div>
<div id="row2" class="row">
<div>
<label id="row2_to" class="divLabel">contact2#test.com
</label>
</div>
<div>
<label id="row2_from" class="fromLabel">test2#something.com
</label>
</div>
<div>
<label id="row2_subject" class="subLabel">Need to create new organization2
</label>
</div>
</div>
</div>
</body>
Following is the CSS:
.ParentContainer
{
margin: 0 auto;
width: 960px;
table-layout:fixed;
}
.row
{
background-color: #FFFFFF;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #CFD4DA;
font-size: 12px;
}
.row > div
{
display: inline-block;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
.rowSelected
{
background-color: #CEE3F6;
}
.fromLabel
{
position: relative;
left: 64px;
}
.subLabel
{
position: relative;
left: 120px;
}
Please suggest.
You forgot to style those div as table:
Relevant CSS:
.ParentContainer {
display: table;
...
}
.row {
display: table-row;
...
}
.row > div {
display: table-cell;
...
}
Demo: http://jsfiddle.net/abhitalks/824hw/1/
Make your div display as a table cell and assign width for the table cell. Remove position relative property for your labels.
Update your css like below.
.ParentContainer
{
margin: 0 auto;
width: 960px;
table-layout:fixed;
}
.row
{
background-color: #FFFFFF;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #CFD4DA;
font-size: 12px;
display:table-row;
}
.row > div
{
display: table-cell;
width:33%;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
.rowSelected
{
background-color: #CEE3F6;
}
.fromLabel, .subLabel, .divLabel
{
text-align:left;
}
JSFIDDLE DEMO