I am developing a website. In my website I am showing two element side by side. Second element will have fixed width and but first element will take the rest of the space. So I wrote a simple HTML and CSS code like this.
html
<div class="gallery-container">
<div class="gallery-left">
</div>
<div class="gallery-right">
</div>
</div>
css
.gallery-left{
padding-top: 0px;
background: red;
display: inline-block;
height: 100%;
margin-top: 0px;
width: calc( 100% - 100px);
}
.gallery-right{
padding-top: 0px;
display: inline-block;
background: yellow;
width: 96px;
height: 100%;
}
.gallery-container{
width: 100%;
height: 300px;
}
It displays like this:
It is working as expected as you can see the red and yellow boxes. But the problem is when I add an child element to HTML like this:
<div class="gallery-container">
<div class="gallery-left">
<h5>This is child element</h5>
</div>
<div class="gallery-right">
</div>
</div>
The whole left box went down like this:
How can I fix it? I set padding top and margin top zero for both boxes. Main parent element as well. But it is not working.
You should add vertical-align: top; to these inline-block elements. Something like that should work:
.gallery-left{
padding-top: 0px;
background: red;
display: inline-block;
height: 100%;
margin-top: 0px;
vertical-align: top;
width: calc( 100% - 100px);
}
.gallery-right{
padding-top: 0px;
display: inline-block;
background: yellow;
vertical-align: top;
width: 96px;
height: 100%;
}
Related
I have the following structure:
<div class="top">
<button class="wrap">
<span class="text">Hello</span>
</button>
</div>
I have the following CSS:
.top{
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text{
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
I have seen several posts regarding the "span taking the entire width of their parent" and the most popular answer was to make it display: block;
But in this case, it doesn't work. If you inspect, you will see that the span is taking 200px width instead of 216px width (width of button).
How can I fix this problem? Here is the fiddle
There is padding in your .wrap class. Set padding to 0 on your .wrap, .text declaration.
.top {
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text {
padding: 0px; //set padding to 0px
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
I would like to center a <div /> in the <body /> and add additional margin-left and margin-right to it.
Something like that - of course it should work :) https://jsfiddle.net/kweyn912/
Normally, I would use margin: auto, but in this case I want to specifically add additional margin, so I cannot do that.
I tried using transform: translateX(-50%) together with left: 50% and margin-left. That worked until I tried setting margin-right
Side notes:
I have some restrictions: I cannot use padding instead of margin. I cannot use position: absolute and I have to use display: block
Updated your project adding
div {
width: 200px;
height: 100px;
background: lightblue;
margin-left: 20px;
margin-right: 40px;
position: absolute;
left: calc(50% - 110px)
}
body {
width: 100%;
background: white;
text-align: center
}
https://jsfiddle.net/kweyn912/6/
Try adding padding to the body (or parent container) rather than the div with the div centered in the parent element. That should center the div with a gutter on the left/right.
div {
max-width: 400px;
height: 100px;
background: lightblue;
margin: 0 auto;
display: block;
}
body {
background: white;
padding: 0 20px
}
https://jsfiddle.net/y16k52xt/
Instead of using margin: 0 auto and display: block, you can use display: inline-block along with text-align: center on the parent element to center the divs. Then use your margin adjustments to set it off-center. Use white-space: pre to force each item to break to a new line.
body {
width: 100%;
background: white;
text-align: center;
white-space: pre;
}
.div {
margin-left: 20px;
margin-right: 40px;
width: 200px;
height: 100px;
background: lightblue;
display: inline-block;
}
.two {
width: 250px;
margin-left: 30px;
margin-right: 80px;
background: red;
}
<body>
<p>
CENTER
</p>
<div class="div one">
Lorem ipsum
</div>
<div class="div two">
</div>
<div class="div three">
</div>
</div>
</body>
https://jsfiddle.net/kweyn912/12/
Lets say that you want your element to be off center in 20px to the left (Net result of your example of margin-left: 20px and margin-right: 40px;
This is equuivalent to a transform: translateX(-20px);
div {
width: 200px;
height: 100px;
background: lightblue;
margin: auto;
transform: translateX(calc(20px - 40px));
}
<div>
Lorem ipsum
</div>
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.
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.
This is difficult for me to ask.
In short: my div overlaps (gets outside the table). I want the table to be sized according to the div.
When I'm trying to add a footer, the content overlaps it. Here is the code:
Here is the page: page
the .middle css class sets the height of the center content to 25px The footer is therefore positioned related to the menu table content on the left.
If you remove the 25px from the css class the div should work as you expect
Ok I will suggest you rewrite your site because it's total mess, use my template for starters:
<div class="wrap">
<div class="header"></div>
<div class="body">
<div class="left-side"></div>
<div class="center"></div>
<div class="right-side"></div>
</div>
<div class="footer"></div>
</div>
And css:
.wrap{
width: 400px;
height: 500px;
margin: 0 auto;
}
.header{
width: 100%;
height: 50px;
background-color: #dddddd;
}
.body{
width: 100%;
height: 350px;
}
.left-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.center{
position: relative;
float: left;
width: 60%;
height: 100%;
background-color: #cccccc;
}
.right-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.footer{
width: 100%;
height: 100px;
background-color: #dddddd;
}
Here is live example in jsFiddle
well, #Arturas.. I kinda agree with #skmasq for your website. I think it'll be better if you're not using table for the layout. but, if still want to use your current website source code, try to delete the .middle's height property. because you set it fixed 25px, but the content is overload, that's why it's overlapping.