I took a solution from here earlier to solve some div alignment problems, just when I thought all was sorted - adding an image into any of my containers causes text to be misaligned elsewhere, see image and code below.
The image in the code is just a blue rectangle, any image will do.
Does anyone know how I can resolve this?
<style>
.row {
display: table;
width: 98%;
min-width: 440px;
border: solid 5px black;
border-top: none;
margin-top: -4px;
}
.left {
width: 150px;
border-right: solid 5px black;
display:table-cell;
background-color: black;
}
.middle {
width:auto;
display:table-cell;
font-size: 9.5pt;
padding-bottom: 20px;
}
.right {
width: 150px;
border-left: solid 5px black;
display:table-cell;
background-color: black;
padding-left: 5px;
overflow: auto;
}
</style>
<div class="row">
<div class="left">
<img alt="" src="/Images/Blue.png" border="0"></img>
</div>
<div class="middle">
Text which should be at the top
</div>
<div class="right">
</div>
</div>
Related
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
The next image is currently what I have.
And this is what should be:
As you can see, the dots on the third column are not aligned. It should meet the next requirement:
As you can imagine, I might use two divs because of the two borders.
This next code is what I have tried all day long, I cannot achieve to position the dots in the middle with the background-color stretched (considering the two border colors). What am I wrong? Should I remove everything and change it by a flexbox? I'll appreciate your help.
Html code:
You have 4 items in your cart
<article class="cart-item">
<div class="left">
<img src="images/item1.jpg"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
<div class="grouped-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</article>
Css code
.cart-item
{
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
display: table;
height: 100%;
overflow: hidden;
}
.cart-item>div
{
display: table-cell;
}
.left,.center
{
padding-bottom: 10px;
padding-top: 10px;
}
.left
{
padding-left: 15px;
padding-right: 15px;
width: 33.33%;
}
.left img
{
max-width: 100%;
}
.center
{
padding-right: 15px;
text-align: left;
vertical-align: top;
width: auto;
}
.right
{
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
vertical-align: middle;
width: 15px;
}
.right .grouped-dots
{
background-color: #F5F5F5;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
display: block;
height: 100%;
}
.cart-item .grouped-dots span::after
{
color: #CCCCCC;
content: '.';
font-family: 'Open Sans',sans-serif;
font-size: 40px;
line-height: 0;
}
This approach is using table and table-cells as display values. If you think I'm in the wrong path, please let me know.
It's because of this style:
.right .grouped-dots {
height: 100%;
}
Since its as tall as its parent, there's no room for it to move vertically to the "middle."
Remove that style, and move its background color to .right:
.right {
background-color: #F5F5F5;
}
Fiddle
This is my code
table#projectTable > tbody , table#productTable > tbody{
height: 300px;
overflow: auto;
}
The scroll bar is working if you click the upper part but not the lower part.
Very strange.
I used firefox inspect element and I think its something to do with the TR element overlapping because the scrollbar is working fine just above the (imaginary extended line from ) second row (Edit product info)
as i say at comments
.innerDiv{position:absolute;top:80px;left:185px;z-index:10;}
will solve your problem.
maby you already know but if you dont may i kindly suggest you that give a chance to tableless design when you design a layout.
for example - also this sample could be better -
preview
HTML
<div id="container">
<div id="left">
Edit branchInfo
Edit branchInfo
Edit projectList
</div>
<div id="right">
<div id="table1"> ...1... </div>
<!--#table1-->
<div id="table2"> ...2... </div>
<!--#table2-->
<div id="table3"> ...3... </div>
<!--#table3-->
</div>
<!--#right-->
<div class="clear"></div>
</div>
<!--#container-->
CSS
.clear {
clear: left;
}
#container {
border: 1px solid #666;
padding: 5px 5px 0 5px;
}
#left, #right {
float: left;
}
#left a {
display: block;
width: 100px;
height: 200px;
font: 12px/200px arial;
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#left a:hover {
background: #efefef;
}
#left a:active {
background: #c0c0c0;
}
#right {
border: 1px solid #999;
margin-left: 5px;
padding: 10px;
height: 654px;
width: 900px;
}
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