everyone!
I'm having a div height/border issue. Here's the script I'm working with:
.content
{
background-image: url(../../images/logo-04.png);
background-position: left bottom;
background-repeat: no-repeat;
background-size: 30%;
border-bottom: 0.1em solid #000000;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top: 0.1em solid #000000;
display: inline-block;
width: 100%;
}
.content-left
{
float: left;
font-size: 100%;
text-align: justify;
width: 74%;
}
.content-right
{
border-left: 1px solid #000000;
float: right;
font-size: 80%;
height: 100%;
text-align: right;
width: 25%;
}
And here's a snippet of the div I'm working with:
<div class="container2">
<!-- Content -->
<div class="content">
<div class="content-left">
</div>
<div class="content-right">
<div class="sidelinks">
<ul>
<li><a class="link3" href=""></a></li>
<li><a class="link3" href=""></a></li>
</ul>
</div>
<div class="social">
<---End--!>
The divs above are closed properly in my code (I didn't want to bore anyone with the extra coding).
For some reason, I can't seem to get my left border to extend the length of the content-right div unless I use pixels (height: 500px). I usually use percentage, but at height: 100%, the border only goes as far as the contents inside the content-right div.
Any suggestions to get my desired effect?
You're not defining a height for .content, so even with height:100% it's only 100% of the parent, content.. Try setting content height to 100% and see if the border goes with it
Related
I'm having issue with positioning these boxes. Is there someone that know how to make it exactly same as it's on picture?
https://i.stack.imgur.com/9aW9B.png
Deleted some parts from CSS because they aren't important for this.
CSS & HTML
.aktualita-perex{
float: left;
width: 100%;
padding-bottom: 10px;
color: #4c4c4c;
}
.aktualita-img{
position: relative;
float: left;
}
.aktualita-thumbmail{
width: 100%;
height: 216px;
object-fit: cover;
}
.aktualita-header{
color: #282828;
font-size: 27px;
width: 100%;
padding-bottom: 20px;
}
.aktualita-body{
padding: 15px;
float: left;
}
.aktualita-container{
width: 383px;
border: 1px rgba(125, 125, 125, 0.19) solid;
float: left;
margin: 5px;
border-radius: 5px;
overflow: hidden;
}
<article class="aktualita-container">
<div class="aktualita-thumbmail">
<div class="aktualita-img"><img src="http://i.imgur.com/x3lpHuG.jpg" width="100%" height="100%"></div>
<div class="aktualita-datum">25. Ledna 2017</div>
</div>
<div class="aktualita-body">
<div class="aktualita-header">Aqualand Moravia</div>
<div class="aktualita-perex">SOME TEXT</div>
<div class="aktualita-tlacitko">Číst více</div>
</div>
</article>
Your floats are off because of your container heights. To make it seamless you need to have your heights all be the same id suggest increasing the height or adding a height (if you don't currently have one on your container) until you get the seamless look you are looking for.
Try to float: left and make them display: inline-block.
In this particular situation you can add clear: left to the CSS of the container/article tag which you want to move to the left.
But in general, as #oompahlumpa wrote, you should set all your containers to the same height.
The {margin:0 auto} can't make all the content center-placed in my case.
div.whole {
width: 620px;
overflow: auto;
border: 2px solid red;
}
div.left,
div.right {
margin: 0 auto;
float: left;
width: 300px;
height: 200px;
border: 2px solid black;
}
li {
list-style: none;
margin: 0 0;
padding 0 0 0 0;
display: inline-block;
border-bottom: 1px dashed black;
width: 100px;
}
<div class="whole">
<div class="left">
<img src="images/pic.png" width="120" height="120" />
</div>
<div class="right">
<ul>
<li>x1</li>
<li>y1</li>
</ul>
<ul>
<li>x2</li>
<li>y2</li>
</ul>
<ul>
<li>x3</li>
<li>y3</li>
</ul>
<ul>
<li>x4</li>
<li>y4</li>
</ul>
</div>
</div>
The displayed effect is as the following.
How to put the left content--img photo and the right content in the center of div.left and div.right ?
How to put the left content--img photo and the right content in the center of div.left and div.right ?With the help of shareeditflag, display: inline-block;vertical-align: middle; added into my css,the css file was changed into following:
div.whole{
width:620px;
overflow:auto;
border:2px solid red;
text-align: center;}
div.left,div.right{
display: block;
margin: 0 auto;
height: 100%;
float:left;
width:300px;
height:200px;
border:2px solid black;
vertical-align: middle;}
li{
list-style:none;
display: inline-block;
vertical-align: middle;
padding 0 0 0 0;
display:inline-block;
border-bottom: 1px dashed black;
width:100px;}
<div class="whole">
<div class="left">
<img src="images/pic.png" width="120" height="120"/>
</div>
<div class="right">
<ul>
<li>x1</li><li>y1</li>
</ul>
<ul>
<li>x2</li><li>y2</li>
</ul>
<ul>
<li>x3</li><li>y3</li>
</ul><ul>
<li>x4</li><li>y4</li>
</ul>
</div>
</div>
The displayed effect was changed into the following.
ALL the content were made center horizontally,
How to make the content vertically?
Centering the image in the Div you could use padding: to align. on .div-left
Centering the text content should be as simple as a text-align:centeron .div-right
there's a way to make anything centered. You don't need to know the height or width of any component, except the parent's. This involves a couple of things:
heres a fiddle example: https://jsfiddle.net/ahmadabdul3/eed1n1kj/1/
make sure the parent has an explicit height. I say this because html and body are sometimes forgotten. set their heights to 100%. The next thing is, every parent until your centered component should have some sort of height.
This is required for the centered-helper class that you will see.
The second thing is, the parent of the centered content should have text-align: center so that it can be centered horizontally.
Finally, the centered content should be set to vertical-align: middle along with the centered-helper should have height 100% so that it can help center your content vertically.
html:
<div class='parent'>
<div class='centered'>
centered
</div>
<div class='centered-helper'>
</div>
</div>
css:
.parent {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.centered {
display: inline-block;
vertical-align: middle;
}
.centered-helper {
display: inline-block;
vertical-align: middle;
height: 100%;
}
You can use margin for center align.
<head>
<style>
div {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
The text-align property will apply to images also.
So you could do this:
.left, .right {
text-align: center;
}
And this will center the image too.
jsFiddle: https://jsfiddle.net/sukritchhabra/uxve3n53/
Short way for margin is (THe first is for top and bottom the second is for left and right.
Margin:0 auto;
make sure that you give this the a child of a div .
I'm a having a little problem trying to put 2 divs in one line in Safari. It's just an HTML for a test (http://www.despegarboido.byethost22.com/) The problem is that when I open it on Safari, all of my rows collapse into the same column.
My html looks something like this:
<div class="row">
<div class="leftColumn"></div>
<div class="rightColumn"></div>
</div>
.row {
display: flex;
width: auto;
}
.leftColumn {
border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #ffff33;
width: 60%;
height: 330px;
margin: 5px 20px;
margin-right: 5px;
float: left;
}
.rightColumn {
border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #8cb6dd;
background: url(images/playa1.jpg);
background-repeat: no-repeat;
width: 40%;
height: 330px;
margin: 5px 20px;
margin-left: 5px;
float: left;
}
Those divs should be one next to the other, It works on every other browser, and I cant find a way to make it work on Safari.
You should reduce the width of your divs. The width of leftColumn is 60% and the width of the rightColumn is 40%. Your logic is correct, but you have not taken the margins into account. For example, you applied the following margin: 5px 5px 5px 20px to the div with the class name leftColumn. So, the total space leftColumn is occupying will be equal to 60% of the page + 25px. I am adding 25px to the total space because the right margin is equal to 5px and the left margin is equal to 20px.
Because you have not accounted for the margins when assigning the width to leftColumn and rightColumn your rightColumn is being pushed to the next line due to less space on the previous line.
Try to make them inline from the CSS as below,
Create a class say myDiv and within your CSS add below line,
.myDiv{
display: inline;
}
<div class="row">
<div class="leftColumn myDiv"></div>
<div class="rightColumn myDiv"></div>
</div>
Here is an example
Use the following code (recently updated):
<div class="row">
<div class="column" id="left">
<div class="inner" id="leftinner"></div>
</div>
<div class="column" id="right">
<div class="inner" id="rightinner"></div>
</div>
</div>
body {
margin: 0px; padding: 0px
}
.row {
display: flex;
width: auto;
}
.column {
padding: 5px 20px;
float: left;
}
.inner {
border-radius: 10px;
-webkit-border-radius: 10px;
height: 330px;
}
#leftinner {
background-color: #ffff33;
}
#left {
width: 60%;
padding-right: 5px;
}
#rightinner {
background-color: #8cb6dd;
background: url(images/playa1.jpg);
background-repeat: no-repeat;
}
#right {
width: 40%;
padding-left: 5px;
}
This version avoids repeating style definitions unnecessarily and also fixes the width problem. See it in action: http://cssdeck.com/labs/khpx1e8y
I have html like below
<div>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
.left
{
background: none repeat scroll 0 0 white;
border-right: 1px solid #C3C3C3;
float: left;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 170px;
}
.center
{
background: none repeat scroll 0 0 white;
float: left;
margin-left: 171px;
margin-top: 30px;
min-height: 100%;
position: absolute;
width:895px;
}
.right
{
background: none repeat scroll 0 0 #DEDFE8;
border-left: 5px solid #BDC1DE;
float: right;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 276px;
}
when the center panel stretches the right and left panels stay at there height of 100%
Is there a way of stretching the right and left panels when the center panel stretches.
Edit
When the center panel consists of html controls that make the center div expand more than the min-height of 100% the left and right panels do not expand and these panels have different colors and borders and the page doesnt look right as you can see gaps after the when right and left panels do not expand and the center panel does.
Personally I like the equal height columns from www.ejeliot.com
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
Faux Columns is also good and probably easier to set up but if you're really dead against using an image this is a pretty good method.
Based on your edit, you mean you want them to expand vertically. There are a few ways to do this, but my favorite is faux columns.
You basically put a background with your column colors on the whole containing div and it gives the illusion that all three columns are the same height.
You're still going to want to workout your positioning issues. As I mentioned before, position:absolute should be used with either top, left, bottom or right. Or, instead of absolute positioning, you can use floats. You can't use both :)
set the outer div that contains the divs below with width:100%, position:absolute and min-height:100%
then change the css to this
.left
{
background: none repeat scroll 0 0 white;
border-right: 1px solid #C3C3C3;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 170px;
}
.center
{
background: none repeat scroll 0 0 white;
float: left;
margin-left: 171px;
margin-top: 30px;
width:895px;
}
.right
{
background: none repeat scroll 0 0 #DEDFE8;
border-left: 5px solid #BDC1DE;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 276px;
}
<div class="width:100%;position:absolute;min-height:100%">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
I am bad at integration its crasy. I float a lot of my stuff and find that whenever I start floating something I have to float its container ans its containers container ad nauseum because otherwise the container is collapsed.
So looking at my site now its pretty nice a stable but if I put a border on body I see that it is 1px high on top and everything in body is outside. If I float body then everything looks good but:
1- Is that bad design and how should I do it?
2- If its ok how do I center body? I use margin: auto. But once body is floated it stops working.
This is my css.
body {
width: 960px;
font-size: 13px;
margin: auto;
margin-top: 20px;
border: 1px #000 solid;
}
.wrapper {
float: left;
width: 960px;
}
.header {
float: left;
width: 960px;
border: 1px #000 solid;
margin-bottom: 20px;
}
.menu {
width: 960px;
float: left;
border: 1px #000 solid;
}
.sidebar {
width: 260px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.content {
border: 1px #000 solid;
margin-left: 20px;
margin-top: 20px;
width: 620px;
float: left;
padding: 10px;
}
.footer {
border: 1px #000 solid;
width: 960px;
float: left;
margin-top: 20px;
}
And the layout file:
<body>
<div class="wrapper">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div class="sidebar">
sidebar
</div>
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
Anyways hope I am clear.
Replace the float with overflow: auto in .wrapper and it should work just fine. You can then center it with margin: auto:
.wrapper {
overflow: auto;
margin: auto;
width: 960px;
}
Also, remove width: 960px and margin: auto from body as you don't need them anymore.
If you set your container's overflow to auto or hidden you shouldn't have to float it too (unless you want to for other reasons). Such as:
<div id="container">
<div id="left">Content! this should be floated left</div>
</div>
#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }
Should have the container display with the border around everything.
Yes, floating all the elements like that is bad design and an abuse of the float element. It would be well worth your while to learn the natural flow of the elements and proper use of CSS position.