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.
Related
It creates exactly what I need but I cannot center to whole element on the page. centering will only center the text within the background colored area. What am I doing wrong?
I tried many different code combination but cannot make this work.
GROW YOUR BUSINESS WITH US
<h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px;">GROW YOUR BUSINESS WITH US</h1>
I would like whole element above to be centered on the page.
You also could just change the display attr to block and add margin:auto to it!
I placed it into a div with 1000px width for you to view, but you just need the h1
<div style="width:1000px;">
<h1 style="display: block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin:auto;">GROW YOUR BUSINESS WITH US</h1>
</div>
You can add div around H1 and add width and margin:auto like
<div style="width:650px; margin: auto;"><h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; ">GROW YOUR BUSINESS WITH US</h1><div>
Or like Huangism do
<h1 style="text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin: auto;">GROW YOUR BUSINESS WITH US</h1>
here is an example
.container{
width: 100%;
height: 100%;
border: 1px red solid;
display: inline-block;
height: 90vw;
}
.container > div{
width: 150px; /* very impotent */
margin:auto;/* center position */
border:1px #CCC solid;
text-align:center;
}
<div class="container">
<div> center div </div>
</div>
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
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
I'm trying to put a logo and a sidebar next to eachother, but it just won't work. The logo container needs to be centered at the top. And the sidebar needs the be at the top-left Can you help me? I already tried float, no succes. :(
code:
<body>
<center>
<div id="logo1">
<div id="logo2"></div>
</div>
</center>
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
</body>
CSS:
#test1 {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: -10px;
margin-left: -15px;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
Ok, This is what you have to do :
You need to remove the display:inline-block from #logo1
And instead of just writing margin-top:10px , you need to use margin:0px auto, or you could write margin:10px auto. By this, it will center your #logo1 div.
But to center a "div" , you need to have another container(div) that wrap within your div. So that it will know, from which side to which side that it will have to be "centered".
For that reason, you will need to create another div or container around your #logo1 div, and lets assume it is called "right" (see the code below).
And for this div/container to be just beside your sidebar, it will need to have a relative position same as your sidebar. Now, you can just float both of your #sidebar1 and also your #logo1 to the left.
Thus, you dont have to use that negative margin for your sidebar anymore (remove that). If you wanted to use the negative margin, you have to use the absolute position in this case. But you will then have to restructure your whole #logo1 div which will create a lot of works.
This is the full code for your reference :
HTML code :
<div id="container">
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1">This is sidebar</div>
</a>
</div>
<div id="right">
<div id="logo1">
<div id="logo2"><This is logo</div>
</div>
</div>
</div>
And use this CSS :
#container{
width:1000px;
height:1080px;
position:absolute;
border:1px solid #000;
}
#test1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position:relative;
float:left;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
border:1px solid red;
}
#right{
position:relative;
float:left;
margin-top:0px;
width:870px;
height:100px;
}
#logo1 {
position:relative;
border: 1px solid;
margin: 0px auto;
height: 100px;
width: 700px;
}
Do you want this ?
#test1 {
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
background-image:url('Afbeeldingen/1.png');
}
#sidebar1 {
position:absolute;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
<div id="logo1">
<div id="logo2"></div>
</div>
I assume this is what you want? http://jsfiddle.net/Le6PH/
You should do:
Remove the negative margins (If you don't know what you are doing, don't use negative margins)
Remove the <center> tag (This tag is deprecated since EVER)
Remove the margin of your logo
Add a wrapper div around your whole structure
Add the following CSS to that div
CSS
.wrapper{
position:relative;
width:818px; /* sidebar width + logo width */
}
Change position:relative; to position:absolute for your logo & sidebar divs.
Add top:0; for both divs
Add right:0; for the sidebar div
EDIT:
With a centered logo, like this (http://jsfiddle.net/Le6PH/1/) you'll need to change 2 things:
Add a margin-left:118px; to the logo div
Change the width of the wrapper to width of logo + margin logo + width of sidebar.
Try floating your div, it should look like this..
<div class="row">
<div id="log"></div>
</div>
<div class="row">
<div id="sidebar"></div>
</div>
css
.row{
float: left;
width: 50%;
}
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.