I have a website with a fluid/dynamic layout in which I need to center specific text elements between images. Everything is all fine and dandy and I have done so by changing the margins of the text elements, however if I were to change the text inside my p tags, the images would no longer be aligned they way they are or the text would no longer appear exactly centered next to the adjacent images.
JSFiddle that resembles my "problem": http://jsfiddle.net/3s4bhwg4/4/
Ideal image if my JSFiddle does not look correct:
Is there a more maintainable way to achieve the same results of centering the text or is using margins to this extent acceptable/considered good practice?
I'm very rusty with web design, so I'll take any criticism happily.
Note: Resizing the JSFiddle width seems to break the layout. However resizing it on my local webpage keeps it constant....
CSS:
#wrapper{
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 100%;
}
.row{
width: 100%;
}
/*Please execuse my use of left/right in naming my ids. */
#contentleft{
float: left;
width: 60%;
}
#contentleft h1{
margin: 30% 5% 0 40%;
}
#contentleft p{
margin: 0 5% 0 40%;
}
#contentright{
float: right;
width: 40%;
}
#contentright p{
margin: 17% 30% 43% 10%;
}
img{
width: 100%;
}
HTML:
<div id="wrapper">
<div class="row">Header</div>
<div id="contentleft">
<IMG src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg"></IMG>
<H1>Random.</H1>
<P> Both texts must be centered next to their adjacent images as well. </P>
</div>
<div id="contentright">
<P>The margins of this text pushes the image down so it aligns with the corner of the other image.
</P>
<IMG src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg"></IMG>
</div>
</div>
This is the closest I could get using a table as suggested by #JStephen: JSFIDDLE
The only way I could make it work was to keep one image un-scaled.
And I couldn't get them to meet exactly in the corners.
EDIT:
Working correctly now...
I managed to hack it by inserting the lower image in the cell above it in the first row, setting its height to 1px and opacity to 0 and floating it. This works because the table layout is fixed so the first row is used to format the table. (By floating the hidden image, the centering of the text is unaffected.) I then set the width of the visible copy of the second image to 100%.
Added padding: 0; in td as well as border-collapse: collapse; in Table to make the corners touch exactly like your pic. (It seems the default padding is not zero)
It works as long as the height of the text is less than that of the (visible) images
HTML
<body>
<div class="row">Header</div>
<table id="wrapper">
<tr id="cont-top">
<td>
<img src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg" />
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
<p>The margins of this text pushes the image down so it aligns with the corner of the other image.</p>
</td>
</tr>
<tr id="cont-bottom">
<td>
<h1>Random.</h1>
<p> Both texts must be centered next to their adjacent images as well. </p>
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
</td>
</tr>
</table>
</body>
CSS
#wrapper {
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
height: 100%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
z-index: 0;
}
td, tr{
padding: 0;
position: relative;
}
td{
/*outline: 1px dotted red;*/
}
.row {
width: 100%;
padding: 0.5em;
height: 4%;
}
/*top row********/
#cont-top {
height: auto;
margin: 0;
padding: 0;
}
/*image*/
#cont-top td:first-child {
width: 60%;
}
#cont-top img{
width: 100%;
vertical-align: bottom;
z-index: 20;
}
/*text*/
#cont-top td:last-child{
padding: 0;
}
#cont-top td:last-child p {
margin: 0 10px;
vertical-align: central;
}
/*formatting hack*/
#cont-top td:last-child img{
width: 100%;
height: 1px;
line-height: 1px;
float: left;
/*opacity: 0;*/
}
/*bottom row********/
#cont-bottom {
height: auto;
position: relative;
}
/*image*/
#cont-bottom td:last-child {
vertical-align: top;
}
#cont-bottom img{
vertical-align: top;
width: 100%;
left: 0;
z-index: 20;
}
/*text*/
#cont-bottom td:first-child {
vertical-align: central;
padding: 0 10px;
}
Related
I'm very novice to HTML and CSS and have not yet "gotten it" how it all works.
I am trying to achieve a table made of two rows, in which the first row only has one column and spans over the two columns of the second row.
In the first row I have an input box and I'd like the row to conform to the height of this input box. On the bottom left I have a button with its own style and I'd like the row (and cell) to conform to the size of the button. On the bottom right I have an image and I'd like the image to scale (preserving its aspect ratio) such that it either fills the height of the row (and floats to the right) or the width of the cell and centers vertically.
The table will fill its container (a div) horizontally.
Can anyone give me hints?
I don't necessarily need a table element, just something that achieves the effect without me having to specify pixel sizes to keep everything scalable.
Here is what I have now (some garbage may still be in there...):
table {
display: table;
table-layout: auto;
width: 100%;
}
tr {
display: table-row;
width: auto;
clear: both;
}
input {
font-size: 16px;
}
input[name="text"] {
line-height:1.875;
display:table-cell;
width:100%;
}
input[type="submit"] {
border: 0;
border-radius: 0;
background: #d7b221;
box-shadow: none;
color: white;
font-size: 16px;
font-weight: bold;
line-height: 1;
padding: 1.4em 1.6em 1.2em;
}
img {
width: auto;
height: 52px;
}
a {
display: block;
float: right;
}
<form>
<table>
<tr>
<td colspan="2">
<input name="text" placeholder="Enter some text here"/>
</td>
</tr>
<tr>
<td><input type="submit" value="Click Here"/></td>
<td><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/></td>
</tr>
</table>
</form>
I guess it ultimately boils down to this:
#container {
border:1px solid red;
}
#main_img {
height: 30px;
width: 30px;
}
#dep_img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img id="main_img" src="http://i.stack.imgur.com/xkF9Q.jpg">
<img id="dep_img" src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Is there any way in which the size (height) of the main image can dictate the size (height) of the dep image?
Why are you using a table to layout in the first place when you can do all that with just CSS.
Learn CSS from this site: http://learnlayout.com/
If all you want is that all images are of the same size then that can be easily addressed by using a class for the images.
#container {
border:1px solid red;
padding: 5px;
}
.my-kind-of-image {
height: 30px;
width: 30px;
}
<div id="container">
<img class="my-kind-of-image" src="http://i.stack.imgur.com/xkF9Q.jpg">
<img class="my-kind-of-image" src="http://i.stack.imgur.com/xkF9Q.jpg">
<img class="my-kind-of-image" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/>
</div>
I experienced strange behaviour when trying to position two divs horizontally. I got the same behaviour both for firefox and chrome, so I figured out there might be something deeper about layout that I don't understand.
Here is my HTML:
<div class="parent"><div class="cell left">a</div><div class="cell right">b</div></div>
It is on one line to avoid the whitespaces.
Here is my CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.cell {
height: 100%;
display: inline-block;
margin: 0;
padding: 0;
/* vertical-align: bottom; */ /* toggle this! */
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: royalblue;
width: 50%;
}
I include here an example jsfiddle.
Here is a picture:
The current code works correctly. I get two divs, each 50% width of the screen.
First quirk: No text in divs
The first quirk happens if I remove the text from both of the divs. That means, if my HTML would be:
<div class="parent"><div class="cell left"></div><div class="cell right"></div></div>
In this case I get a vertical scroll bar.
Picture:
Second quirk: Text only in one div:
This is where the really strange things happen.
If I have text only in one of the divs, like this:
<div class="parent"><div class="cell left">a</div><div class="cell right"></div></div>
The div with the text is pushed down to the bottom, and the other one is unchanged. Pictures:
Solution
I found (by trial and error) that if I add
vertical-align: bottom;
to .cell, it fixes everything.
My problem is that I don't understand why. I will be happy to get any explanation to what is happening here.
Inline elements and boxes vertically align, by default, to the baseline. There are three, not two, inline boxes in your line.
When an inline-block element contains text, its baseline is the base of the last line of text it contains. When it doesn't have any content, its baseline is the the bottom of the box.
The third box on the line is called a strut. Its purpose is to give a minimum height to the line. It is zero width, but is like a text character from the font of the containing block and has a line-height that is defined from the containing block. It is always vertically aligned to the baseline.
So your first scenario is this.
Your second scenario is this. See how the bottom of the strut is below the bottom of the boxes, so the total height of the line is greater than 100% that of the viewport, causing the scrollbar to appear.
Your third scenario is this.
You can try this may be all issue solved for this css given " float:left " in " .cell " And " overflow: hidden" in ".parent":
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
}
.cell {
height: 100%;
display: inline-block;
margin: 0;
padding: 0;
float: left;
/* vertial-align: bottom; */ /* toggle this */
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: royalblue;
width: 50%;
}
See Fiddle Demo
vertical-align it acts on the inline-block, rather than its contents.
vertical-align aligns by the border of the line, in which our inline-block is.
when the vertical-align is not specified, the alignment acts by the bottom border of the contents of the inline-block:
<div class="parent"><div class="cell left">a<br>a
</div><div class="cell right">b</div></div>
https://jsfiddle.net/glebkema/qeh9zugg/
UPD. vertical-align: top; and vertical-align: middle; correct the problems by the same way as vertical-align: bottom;.
This may help you.
Add display:table; to parent div and display:table-cell; to child div.
HTML:
<div class="parent"><div class="cell left"> a </div><div class="cell right">b</div></div>
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
display:table;
vertial-align: middle;
}
.cell {
height: 100%;
display: table-cell;
margin: 0;
padding: 0;
vertial-align: middle ; /* toggle this */
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: royalblue;
width: 50%;
}
I'm working on my portfolio site and having trouble getting my divs to size together.
Here it is: I have one body div, inside there are two child divs.
The body div should have max-height 100%, max-width: 100% so that it doesn't exceed the browser window.
The left div contains an image which I want to scale to the parent body div (max-height 100%, max-width 70%).
The right div contains text about the image, it needs to scale to the height of the left div (there is also footer that sits at the bottom of this div).
This shouldn't be so hard, its almost working but right now my image container (left div) is not being contained to the body div.
html,
body {
height: 100%;
}
.Info {
float: left;
width: 25%;
padding-left: 15px;
padding-top: 10px;
/*margin-left: 78%;*/
border-left: 1px black solid;
/*position: absolute;*/
}
.InfoText p {
margin-top: -10px;
}
div img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
box-shadow: 5px 5px 15px #888888;
}
.ImageContainer {
float: left;
height: 100%;
max-width: 70%;
padding-right: 15px;
position: relative
}
section.ImageContainer img {
float: left;
object-fit: cover;
}
#SideQuote {
margin-top: 30px;
}
.StuffInBody {
position: relative;
padding-top: 15px;
float: left;
display: flex;
}
footer p {
position: absolute;
bottom: 0%;
margin: 0;
}
<div class="StuffInBody">
<div class="ImageContainer">
<img class="contained" src="images/TheGMODebate copy.jpg" alt="" />
</div>
<div class="Info">
<div class="InfoText">
<p>ILLUSTRATION</p>
<p>Title: <em>The GMO Debate</em>
</p>
<p>Media: Gouache</p>
<div id="SideQuote">
<p class="ClickToEnlarge">Full screen image click here.
</p>
</div>
<footer>
<p>© Brooke Weiland 2015</p>
</footer>
</div>
</div>
</div>
It's very hard to make a reliable interface using floats.
It changes default behaviour and put your element outside of the flux.
You should be able to do what you want using only flex.
The property box-sizing: border-box also makes miracles (margin and padding easier to manage).
Also, the object-fit property is not enough supported by browsers to be used now IMHO.
http://caniuse.com/#feat=object-fit
I have two tables inside divs inside another div:
HTML
<div class="container center">
<div class="thing">
<table class="tabel center" style="width:230px">
<tr><td>Example</td></tr>
</table>
</div>
<div class="thing">
<table class="tabel center" style="width:230px">
<tr><td>Example</td></tr>
</table>
</div>
</div>
CSS
.container {
width: 100%;
overflow: hidden;
float: left;
border: 1px solid red;
text-align: center;
}
.tabel {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
.thing {
width: 50%;
float: left;
min-width: 230px;
}
.center {
margin: 0 auto;
}
The two cells are centered correctly
[Image deleted by host]
but when the width of the screen gets too small, the cells go underneith each other (what I want), but they no longer get centered:
[Image deleted by host]
So what I want them to look like:
[Image deleted by host]
You have to remove float: left;, set display: inline-block; and eliminate white space between them.
.thing {
width: 50%;
display: inline-block;
/* float: left; */
min-width: 230px;
vertical-align: top;
}
fiddle: http://jsfiddle.net/3g7xk0sj/1/
Just use media query http://jsfiddle.net/3g7xk0sj/3/
#media all and (max-width: 480px) {
.thing {
width: 100%;
}
}
The problem you are facing is that you are telling each floating DIV (class thing) to be 50% width a minimum of 230px, but it will never span to 100% of the container's width (unless the container is also 230px wide). So the auto margin will only be applied within class .thing's width, which is 230px. Now add to that your table that is ALSO 230px wide, no margin will ever be rendered and consequently you tables will never float in the center.
Try using a CSS media query instead to force a 100% width on class thing when the screen size goes below 460px (230px*2).
Alternatively, use display: inline-block instead of floating, as emmanuel suggested.
Remove float:left & use margin:0 auto in thing class
Demo http://jsfiddle.net/3g7xk0sj/4/
.container {
width: 100%;
overflow: hidden;
float: left;
border: 1px solid red;
text-align: center;
}
.tabel {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
.thing {
margin: 0 auto;
width: 50%;
}
<div class="container center">
<div class="thing">
<table class="tabel center" style="width:100%">
<tr><td>Example</td></tr>
</table>
</div>
<div class="thing">
<table class="tabel center" style="width:100%">
<tr><td>Example</td></tr>
</table>
</div>
</div>
I'm making a site and trying to center the image head. However, it doesn't appear to be working.
Here is the HTML:
<body>
<div id="templatemo_header">
<div class="image"><img src="images/server_banner_lax_en5.png" alt="Header"></div>
</div>
</body>
And the CSS:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 762px;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}
#templatemo_header .image {
width: 762px;
margin: 0 auto;
}
I tried to add margin: 0 auto; to the image, but it still is not centered. How can I do this?
Modify the css for the div containing your image with:
margin: 0 auto;
width: 100%;
Add the following to your CSS file:
.image { width:762px; margin:0 auto;}
Your wrapping div is the same width as the image, this stops any margins from being automatically applied since there is no space.
There are a few ways to fix this, but easiest would be to set the width of templatemo_header (the wrapper div) to 100%. This way the image margins can expand, thereby centering the image.
So in your css, modify the width from 762px to 100%, like so:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 100%;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}