I am writing a website in HTML and CSS. For the footer I would like to have 2 boxes for "contact" and "address" aligned, with the contact-box having 25% width and the addressbox having the rest. Somehow my divs won't line up correctly, the address-box won't vertically align with the top.
My attmept:
.footer {
margin-top: 5px;
width: 100%;
border: 1px solid black;
}
.anschrift {
width: 25%;
padding: 5px;
display: inline-block;
border-right: 1px solid black;
border-bottom: 1px solid black;
vertical-align: top;
}
.kontakt {
width: 70%;
margin-left: 28%;
display: inline-block;
padding: 4px;
vertical-align: top;
}
<div class="footer">
<div class="anschrift">
<h2>
Anschrift:
</h2>
<h3>
Lorem ipsum...
</h3>
</div>
<div class="kontakt">
<h2>
Kontakt:
</h2>
<h3>
Lorem ipsum...
</h3>
</div>
</div>
.footer {
margin-top: 5px;
width: 100%;
border: 1px solid black;
}
.anschrift {
width: 25%;
padding: 5px;
display: inline-block;
border-right: 1px solid black;
border-bottom: 1px solid black;
vertical-align: top;
}
.kontakt {
width: 70%;
display: inline-block;
padding: 4px;
vertical-align: top;
float:right;
}
<div class="footer">
<div class="anschrift">
<h2>
Anschrift:
</h2>
<h3>
Lorem ipsum...
</h3>
</div>
<div class="kontakt">
<h2>
Kontakt:
</h2>
<h3>
Lorem ipsum...
</h3>
</div>
</div>
Remove the margin left and float the div to right in .kontakt i.e change the code of .kontakt to
.kontakt {
width: 70%;
display: inline-block;
padding: 4px;
vertical-align: top;
float:right;
}
It's the margin-left of the contact block, which makes the block bigger than you want it to be. Just remove the margin (or make it smaller).
.footer {
margin-top: 5px;
width: 100%;
border: 1px solid black;
}
.anschrift {
width: 25%;
padding: 5px;
display: inline-block;
border-right: 1px solid black;
border-bottom: 1px solid black;
vertical-align: top;
}
.kontakt {
width: 70%;
//margin-left: 28%;
display: inline-block;
padding: 4px;
vertical-align: top;
}
<div class="footer">
<div class="anschrift">
<h2>
Anschrift:
</h2>
<h3>
Lorem ipsum...
</h3>
</div>
<div class="kontakt">
<h2>
Kontakt:
</h2>
<h3>
Lorem ipsum...
</h3>
</div>
</div>
.kontakt:margin-left: 28%; forces a line break as 25%+28%+70% is more than 100%
Actually, If you use the margin in your blocks then you have to reduce same amount width from others blocks/ html div.
So i prefer to use padding instead of margin to make the spacing between the two of multiple column and you have to use box-sizing while using the padding.
box-sizing:border-box
Related
.container {
display: flex;
justify-content: start;
border-right:1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before{
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
I'm creating a page layout. Inside the container, there are two containers- side-nav and main-content. In the main-content, there is a p tag with some demo text. the p tag is surrounded by two border containers. I m not able to extend the border lines upto the main container width. I have given a snippet of it, Can someone please help me to resolve this issue.
If I understand you correctly, add flex: 1 to .main-content so it will take the whole width that left.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
flex: 1;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
But seems you have more problems here. For example, if there is no enough space, the right border is displayed on top of the text. Also, small extra top and bottom borders in the left of the .main-content. What're you trying to do? How it should look?
You have given right:22px in your :before. That's causing the issue here.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
p {
word-break: break-word;
padding:10px
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
<p style="padding:0 10px;margin:0">two</p>
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
I honestly have no idea what you're trying to do here, but the modified example below looks a bit better, no?
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
padding: 0 20px;
word-break: break-word;
}
.divider {
border-top: 1px solid tomato;
border-bottom: 1px solid gray;
display: block;
margin: 0 -20px;
position: relative;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<hr class="divider" />
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<hr class="divider" />
</div>
</div>
I don't see the reason for having the :before element within the divider if it then has the same color as the border anyways, you could just make the border 2px...or more generally, even if you need different colors, you can just work with top/bottom borders and you don't need the :before at all, you could also choose to got with an <hr /> element for that purpose, would be more semantic anyways =)
Here is a simple box with two columns:
HTML:
<div id="wrapper">
<div class="left">
<div class="image-title">Image title
</div>
<img src="http://placehold.it/100x100">
</div><!-- left -->
<div class="right">
<div class="title">
<h2>Title here</h2>
</div><!-- title -->
<div class="content">
<p>Content here.</p>
<p>Content here.</p>
</div><!-- content -->
</div><!-- right -->
</div><!-- wrapper -->
CSS:
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left {
display: inline-block;
float: left;
width: 30%;
border: 1px solid grey;
text-align: center;
}
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
}
Demo
I expected that the right div should be placed on the right side, but it's placed under the left div element. How can I make it done?
Thanks for your help.
It's really easy to do.
Just use float: right;
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
float: right;
}
You can use box-sizing: border-box; to align it perfectly. No need to use align:right; or adjusted width.
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left {
display: inline-block;
float: left;
width: 30%;
border: 1px solid grey;
text-align: center;
box-sizing: border-box;
}
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
box-sizing: border-box;
}
<div id="wrapper">
<div class="left">
<div class="image-title">Image title
</div>
<img src="http://placehold.it/100x100">
</div><!-- left -->
<div class="right">
<div class="title">
<h2>Title here</h2>
</div><!-- title -->
<div class="content">
<p>Content here.</p>
<p>Content here.</p>
</div><!-- content -->
</div><!-- right -->
</div><!-- wrapper -->
Not sure what you want. But if you want the .right div to be on the right side then you need to apply
float:right
See the demo here.
Also you have a border of 1px outside the box. It needs to be inside you could use box-shadow.
-webkit-box-shadow:inset 0px 0px 0px 1px gray;
-moz-box-shadow:inset 0px 0px 0px 1px gray;
box-shadow:inset 0px 0px 0px 1px gray;
See the demo here.
Update: You have no height on the divs, so the height is being established by your text. Simply apply a height.
.left {
height:130px;
.right {
height:130px;
See the example here.
The first issue here is that you're adding 3px as borders. These aren't counted into the % when you measure the width, which makes the inner divs too wide to fit on one line. if you add the following line to the right div you will see what I mean:
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
float: right;
}
Now we've fixed the second issue; the div will now float to the right as intended, but you can see the boxes are cutting each other's edges. Nowadays there's a nice trick to fix that, and that is box-sizing: border-box; which will automatically match the borders as your div's edge, not outside of it as the standard does.
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left {
display: inline-block;
float: left;
width: 30%;
border: 1px solid grey;
text-align: center;
box-sizing: border-box;
}
.right {
display: inline-block;
width: 70%;
border: 1px solid grey;
float: right;
box-sizing: border-box;
}
<div id="wrapper">
<div class="left">
<div class="image-title">Image title
</div>
<img src="http://placehold.it/100x100">
</div><!-- left -->
<div class="right">
<div class="title">
<h2>Title here</h2>
</div><!-- title -->
<div class="content">
<p>Content here.</p>
<p>Content here.</p>
</div><!-- content -->
</div><!-- right -->
</div><!-- wrapper -->
A minimized css file for this could look like this.
#wrapper {
overflow: auto;
width: 100%;
border: 1px solid red;
padding: 1px;
}
.left, .right {
height:130px;
display: inline-block;
/* choose your border method
border: 1px solid grey;
Or
-webkit-box-shadow:inset 0px 0px 0px 1px gray;
-moz-box-shadow:inset 0px 0px 0px 1px gray;
box-shadow:inset 0px 0px 0px 1px gray;
*/
}
.left {
float: left;
width: 30%;
text-align: center;
}
.right {
float: right;
width: 70%;
}
To the right div to be on the right, you need to add float:right to the css:
.right {
display: inline-block;
width: 70%;
float:right;
border: 1px solid grey;
}
DEMO
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }
Not sure, my isn't wrapping all the way down. Now to make things easier I added borders to everything and background colors to everything. So here is my html...
Now I could add a float left to the page-wrapper div, but that is a hack and not the right way to do it. Now everything is working just the way it is even the way its setup now, but I don't like what a div isn't wrapping, its really annoying.
Here is the JSFiddle http://jsfiddle.net/ywgpB/15/
HTML
<div id="page-wrapper">
<div class="leftContainer">
<article class="welcome">
<header>
<h2>Welcome!</h2>
<img src="../images/dummy_125x125.png">
<p>Dummy Text</p>
</header>
</article>
<article class="hours">
<header>
<h2>Working Hours</h2>
<p>MON - FRI 5:00 AM to 11:00 PM
<br />SAT - SUN 7:00 AM to 8:00 PM</p>
</header>
</article>
<article class="location">
<header>
<h2>Location</h2>
</header>
</article>
</div>
<section id="main">
<div id="banner"></div>
<div class="containBox">
<article class="box">
<h2>Our Members</h2>
<p></p>
<button></button>
</article>
<article class="box">
<h2>Classes</h2>
<p></p>
<button></button>
</article>
<article class="box">
<h2>Programs</h2>
<p></p>
<button></button>
</article>
</div>
</section>
</div>
CSS
body{
background-image: url(../images/pageglare.png);
background-repeat: no-repeat;
color: #000305;
font-size: 87.5%;
font-family: Tahoma, Arial, "Lucida Sans Unicode";
line-height: 1.5;
text-align: left;
}
#page-wrapper{
margin: 0 auto;
width: 90%;
background-color: pink;
clear: both;
border: 2px solid darkorange;
}
.logoContainer{
width: 15%;
border: 2px solid blue;
margin: 2% 0;
}
.leftContainer{
border: 2px solid darkcyan;
width: 25%;
float: left;
background-color: cyan;
display: block;
}
.welcome{
width: 100%;
}
.welcome img{
float: left;
}
.hours{
float: left;
width: 100%;
}
.location{
float: left;
width: 100%;
}
#main{
width: 65%;
margin: 0 2%;
border: 2px solid green;
float: left;
background-color: lightgreen;
}
#banner{
width: 98%;
height: 300px;
border: 2px solid gray;
float: left;
}
.containBox{
margin-left: 1%;
width: 97%;
border: 2px solid black;
height: 250px;
clear: both;
background-color: gray;
float: left;
}
.box{
width: 30%;
border: 2px solid red;
height: 250px;
float: left;
}
Add overflow: hidden to wrapper, or element with clear: both after floating elements.
#page-wrapper {overflow: hidden}
http://jsfiddle.net/ywgpB/16/
I'm trying to build a 3 column div and center all of them inside a wrapper but the div.left and div.right wont stay at the top when the div.middle has text in & when i replace display: inline-block to float: left they stop centering, what could i do so they all center and stay at the top?
example
the html:
<div class="left">
</div>
<div class="middle">
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
</div>
<div class="right">
</div>
</div>
</body>
the css:
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
Try using vertical-align
Working Example
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
vertical-align: top; /* see here */
}
MDN documentation for vertical-align
Just do vertical-align: top; on the left/right like this:
http://jsfiddle.net/RJR2V/2/
But if you want them to be even in heights than I suggest display: table-cell;
Like this:
http://jsfiddle.net/RJR2V/1/
under .wrapper all div should be vertical-aligned to top
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;
}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
.wrapper div{
vertical-align:top;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="middle">
example <p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
</div>
<div class="right">
</div>
</div>
</body>
</html>