Right now Im trying to put an image on the top of a div. The divs are in horizontal, and I don´t know why, but when I put the image its position affects all external divs... I mean, the image should only affect the div in which I put it.
I know this can be a little bit difficult to undestand, I took a capture of my divs: Capture. As you can see, the height of my image affects the external divs.
Here is the HTML code:
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel"><img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue"></div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
And the CSS:
.hoteles{
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles{
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel{
height: 12.5em;
min-width: 23%;
display: inline-block;
background-color: brown;
margin-bottom: 2%;
}
.hotel img{
width: 100px;
}
Other question is... when I put "width 100%" its does not do it, I just can resize the image with pixels... Thanks !
You need to float the divs, currently your divs are positioned as inline-block which is causing disorder. Additionally you can use vertical-align: top to order the inline-block.
Working example:
JSFiddle
.hoteles {
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles {
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel {
height: 12.5em;
min-width: 23%;
background-color: brown;
float: left;
margin:2% 5px 2% 0;
}
.hotel img {
width: 100px;
float:left;
}
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel">
<img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue" />
</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
As for your second question, you need to have a width for the parent of img. Currently it uses min-width, change it to width and give your img the width of 100% and it will expand to the percentage of the parent. Like the following:
.hotel {
width: 23%;
}
.hotel img {
width: 100%;
}
Try adding the following CSS rule:
.hotel { vertical-align: top; }
You are seeing the result of inline elements being positioned along the baseline.
Related
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
I'm trying to accomplish a 3 column fluid layout with an additional span at the bottom that covers the last 2 columns. In addition, I need to use source ordering so that the middle column is actually the first column in the markup.
I have an example fiddle working in chrome/safari/firefox here: http://jsfiddle.net/66krg9cr/6/
<div class="container">
<div class="middle">
<div style="height: 400px;"></div>
</div>
<div class="left">
<div style="height: 600px;"></div>
</div>
<div class="right">
<div style="height: 200px;"></div>
</div>
<div class="bottom"></div>
</div>
* {
box-sizing: border-box;
}
.container {
max-width: 90%;
margin: auto;
overflow: hidden;
}
.middle {
width: 48.59114%;
float: left;
margin-left: 25.70443%; // push toward the middle
margin-right: 2.81771%;
background: #000;
}
.left {
background: #333;
margin-left: -77.11328%; // pull towards the left
width: 22.88672%;
float: left;
}
.right {
background: #666;
width: 22.88672%;
float: right;
height: 200px;
margin-bottom: -9999px; // equal height column trick
padding-bottom: 9999px;
}
.bottom {
background: #999;
width: 77.11328%; // width of the last two columns combined
float: right;
height: 200px;
}
Unfortunately, I can't get this working correctly with IE9. In that browser, the bottom 2 column span drops below the bottom of the first column instead of being beside it. It seems the problem is the source ordering. If I change the order in the HTML to match the visual layout, then IE behaves. It's like IE remembers the height of the first column before it's moved left, and lays out the bottom span according to that height.
I would move the HTML around and just solve the problem, but it's going through a rigorous accessibility/screen reader review, and i know I would get dinged for not having the main content at the top of the source code.
Also, content in these divs will be dynamic in production, so I can't rely on knowing the height of any one column.
Any help would be greatly appreciated.
Why not stray away from negative margins and break the whole thing up into wrappers like this:
HTML:
<div class="container">
<div class="container-main">
<div class="top">
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</div>
<div class="container-left">
<div class="left"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 90%;
margin: auto;
overflow: hidden;
}
.container-main {
position: relative;
float: right;
width: 77%;
margin: 0;
min-height: 100%;
}
.container-left {
position: relative;
float: left;
width: 23%;
margin: 0;
min-height: 100%;
}
.container-main .top {
width: 100%;
min-height: 400px;
}
.container-main .top > div:first-child {
width: 70%;
float: left;
background: #000;
height: 400px;
}
.container-main .top > div:last-child {
background: #666;
width: 30%;
float: right;
height: 400px;
}
.container-main .bottom {
background: #999;
width: 100%;
height: 200px;
}
.container-left .left {
background: #333;
width: 100%;
height: 600px;
}
Your main content is still at the top. If you don't have to have everything in one wrapper then this may work, I can't test it in older IE versions though, but you can give it a try and let me know!
Here is a Fiddle of the above in action: http://jsfiddle.net/egxfnjzL/
...and just for fun, here is an exact copy of what you had: http://jsfiddle.net/whkqnnyg/
I Know there are several questions about this topic, however I think they depend a bit on another CSS properties given before.
I have a nested <div id="tituloParametros>" and I need its text/contain to be centred on vertical and horizontal position.
This is my markup:
<div id="outer">
<div id="parametros">
<div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
</div>
<div id="resultados">
<div id="graficos">
<div id="bars"></div>
<div id="fx"></div>
<div id="pinchetabla">Tabla inútil</div>
</div>
<div id="loquerealmenteimporta"></div>
</div>
</div>
And this is the applied CSS:
#outer{
padding-left: 15px;
padding-top: 15px;
width: 1350px;
height: 640px;
}
#parametros {
float:left;
width: 20%;
height: 100%;
}
#tituloParametros {
height: 9%;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#resultados {
float:right;
width: 80%;
height: 100%;
}
#graficos {
height: 75%;
width: 100%;
}
#bars {
float: left;
height: 100%;
width: 30%;
}
#fx {
float: left;
height: 100%;
width: 30%;
}
#pinchetabla {
float: left;
height: 100%;
width: 40%;
}
#loquerealmenteimporta {
height: 25%;
width: 100%;
}
I thought that:
text-align:center;
vertical-align:middle
both will make it but it didn't. Adding display: table-cell; doesn't solve it neither, it actually crops the background to the text limits.
This is how it looks like
You're right - the table/table-cell approach doesn't work here.
As an alternative, you could resort to the absolute positioning method. An element will be vertically centered when the top value is 50% subtracted by half the element's height. In this instance, it shouldn't be a problem because the height is already set with the % unit. 100% - 50% - 9%*.5 = 45.5% If this weren't the case, you could use calc() or negative margins to subtract the px unit from the % unit. In this case, it's worth noting that the child element is absolutely positioned relative to the parent element.
Updated CSS -- UPDATED EXAMPLE HERE
#parametros {
float:left;
width: 20%;
height: 100%;
outline : 1px solid black;
position:relative;
}
#tituloParametros {
background-color: red;
width: 100%;
height: 9%;
text-align:center;
position:absolute;
top:45.5%
}
The element #tituloParametros is now centered within the parent element. If you want to center the text within it, you could wrap the text with a span element and then use the table/table-cell vertical centering approach:
UPDATED EXAMPLE HERE
#tituloParametros {
/* other styling.. */
display:table;
}
#tituloParametros > span {
display:table-cell;
vertical-align:middle;
}
Here is my fix for this!::::
HTML:
<div id="parametros">
<div id="tituloParametros"><p>Ingresa los puntos conocidos x,f(x)</p></div>
</div>
CSS:
#tituloParametros {
height: 70px;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#tituloParametros p{
line-height: 70px;
}
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Here is the demo
http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html
I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.
Here is an fiddle example of what I have now so you might understand what i need better.
And this is the code:
HTML:
<div id="container">
<div id="header">
<div id="menu">
<a href="#">
<img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
</a>
</div>
<div id="title">
My site title
</div>
<div id="my_button">
<button id="button">My button</button>
</div>
<div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>
CSS:
html,body {
height: 100%;
font-size: 2vmin;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}
#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}
#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}
div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}
#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
You can use :after pseudo element for solving your problem.
add this after #header styles in your CSS
#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}
Then remove floats from #menu, #title and #my_buttun div's and apply
display: inline-block;
vertical-align: middle;
The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.
Last: make #my_button width: 19%;
Look here: http://jsfiddle.net/D22Ln/5/
If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.
http://jsfiddle.net/D22Ln/2/
If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/
By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment
#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.
I have the following HTML snippet:
<body>
<div class="main">
<div class="topBar">
<p>testing</p>
</div>
<div class="content">
<div class="broadcastBar">
<p>testing</p>
</div>
<div class="mainBody">
<p>more testing</p>
</div>
</div>
</div>
</body>
Here is my CSS:
div.main {
}
div.topBar {
background-color: Black;
color: White;
height: 50px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
div.broadcastBar {
background-color: Gray;
width: 300px;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
div.content {
background-color: Yellow;
position: absolute;
width: 100%;
top: 50px;
left: 0px;
height: 100%;
}
My question is this. As you can see by the markup and CSS, I'm trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).
I've tried making it so that the content div doesn't have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.
Any idea what I can do hear to alleviate my issue?
Edit
Added desired output: this screenshot is currently what the above markup and CSS render. This is what I'm going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.
What is the best way to do this if not through absolute positioning?
What you are going to want to learn is using some standard formatting practises with float.
Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.
For Example:
div.topBar {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.broadcastBar {
background-color: Gray;
width: 70%;
height: 80%;
float: left;
}
div.content {
background-color: Yellow;
width: 30%;
height: 80%;
float: left;
}
#EDIT:
So you Have 3 divs and you will want to stack them sequencially.
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:
div.header {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.left {
background-color: Gray;
height: 80%;
width: 70%;
float: left;
}
div.right {
background-color: Yellow;
height: 80%;
width: 30%;
float: left;
}
#QUESTION:
So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.
<div class="container">
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
</div>
div.container{
height: 100px;
width: 100px;
float: left;
}
div.header {
background-color: Black;
color: White;
height: 20px;
width: 100px;
float: left;
}
div.left {
background-color: Gray;
height: 80px;
width: 70px;
float: left;
}
div.right {
background-color: Yellow;
height: 80px;
width: 30px;
float: left;
}