I want to know if it is possible to center a website header which has not been placed into divisions, but has been placed in the header tag.
It's code goes something like this:
<header>
<div class="top">
</div>
<div class="image">
</div>
</header>
The CSS goes something like this:
header
{
width: 100%;
margin: 0 auto;
}
.top
{
width: 30%;
background: yellow;
float:left;
padding: 2.5%
}
.image
{
width: 45%;
background: black;
float: left;
}
I want the contents inside the header to be centered in origanal size as well as when the website is being used in a smaller resolution (i.e. mobile).
How do I go about doing this?
Use display: inline-block instead of float: left.
The elements will then be inline. When adding a text-align: center to the header will make them center inside it.
header {
width: 100%;
text-align: center;
}
.top, .image {
display: inline-block;
vertical-align: top;
margin-left: -4px;
}
.top {
width: 30%;
background: yellow;
padding: 2.5%
}
.image {
width: 45%;
background: black;
}
<header>
<div class="top">t</div>
<div class="image">i</div>
</header>
Related
I am trying to build a header for a webpage where I have three objects, but the third object is dropping down below the header that it is in. How can I get the third object (id="cart") to not drop down below the header? The title and cart divs need to have a fixed width, but the options div needs to stretch with the browser.
My HTML:
<header>
<div id="title">
</div>
<div id="options">
</div>
<div id="cart">
</div>
</header>
My CSS:
#title {
float: none;
height: 150px;
width: 300px;
margin: 0;
}
#options {
display: block;
height: 150px;
background-color: #ff5500;
}
#cart {
height: 40px;
width: 48px;
display: block;
float: right;
}
You can use width: calc(100% - 348px); for the middle element (which makes it reponsive while the other widths remain fixed) and apply float: left to all three elements:
html, body {
margin: 0;
}
header > div {
float: left;
}
#title {
height: 150px;
width: 300px;
margin: 0;
background-color: #ff5500;
}
#options {
height: 150px;
width: calc(100% - 348px);
background-color: #05f;
}
#cart {
height: 40px;
width: 48px;
float: right;
background-color: #5f0;
}
<header>
<div id="title">
Title
</div>
<div id="options">
Options
</div>
<div id="cart">
Cart
</div>
</header>
Give all of the divs heights and widths, and set their display to inline-block.
Is this something you have in mind?
#title {
float: none;
height: 250px;
width: 300px;
margin: 0;
background-color: red;
display: inline-block;
}
#options {
display: block;
height: 150px;
width:300px;
background-color: #ff5500;
display: inline-block;
}
#cart {
display: block;
width:300px;
background-color: blue;
height: 100px;
display: inline-block;
}
Set width to all the three div to 33% and set float property to left for all the three div elements or you can set width to 33% for each div element and add display property with value inline-block it will also make the three div to float next to each other.
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.
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
In the following scenario I do not understand why the height of the elements wrapper and content are not set correctly even though they are set to height: auto, meaning that the 2 divs with the class wrap are not displayed inside the wrapper and content divs.
I recreated the problem in this JSfiddle:
http://jsfiddle.net/202oy3k8/
The As you can see the two orange divs are not displayed inside the wrapper divs, even though the wrapper height is set to auto. What is causing this problem and how can I fix it?
HTML CODE:
<div id="wrapper">
<div id="content">
<div id="top">
</div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap">
</div>
<div class="wrap">
</div>
</div>
</div
CSS CODE:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 1224px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float:left;
width: 48%;
height: 400px;
}
You have to add a clear property to clear left float you have applied to .wrap divs.
What are float and clear for?
If you look in a typical magazine you’ll see images illustrating the
articles, with the text flowing around them. The float property in CSS
was created to allow this style of layout on web pages. Floating an
image—or any other element for that matter—pushes it to one side and
lets the text flow on the other side. Clearing a floated element means
pushing it down, if necessary, to prevent it from appearing next to
the float. Although floating was intended for use with any elements,
designers most commmonly use it to achieve multi-column layouts
without having to abuse table markup.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 400px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float: left;
width: 48%;
height: 400px;
}
.clear {
clear: left;
}
<div id="wrapper">
<div id="content">
<div id="top"></div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="clear"></div>
</div>
</div
Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?
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 got the outcome I wanted (http://jsfiddle.net/jcx3X/40/), but I'm just curious as to why this (http://jsfiddle.net/jcx3X/41/) doesn't work. Why must the div listed first in the HTML be the one to be floated?
It is because the html is what determines the order of the dom (document object model) elements. The element that is not floated will act differently depending on the order.
Maybe THIS FIDDLE will help you on your quest. I just happened to be doing something similar.
HTML
<header class="global-header">
header
</header>
<div class="container">
<div class="column sidebar">
aside content fixed width
</div>
<div class="column page">
main content flexible width
</div>
</div> <!-- .container -->
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.global-header {
width: 100%;
float: left;
padding: 1rem;
}
.container {
width: 100%;
float: left;
height: 100%;
overflow: hidden;
}
.column {
min-height: 100%;
padding: 1rem;
}
.page {
float: none; /* just to be clear */
background: #C0FFEE;
width: auto;
overflow: hidden;
}
.sidebar {
position: relative;
width: 20rem;
float: right;
background-color: #f06;
color: rgba(255,255,255,.8);
}