I'm working on a HTML site where I need to make between 3 vertical columns, one horizontal header, and one footer. But when I'm writing something in the header/footer, the text won't fit in the column.
I have made an HTML document, with a stylesheet.css.
.title{
border-radius: 8px;
border-collapse: collapse;
border: 2px solid black;
float: left;
height: 15px;
padding-top:5px;
padding-bottom: 33px;
margin-left: 20px;
margin-bottom: 10px;
margin-top: 5px;
width: 95%;
}
<div class="rowTop">
<div class="columnTop">
<div class="title">
<h2>Header</h2>
</div>
</div>
I expect that the distance from the top to the text needs to get smaller, but when I change the px, they won't get smaller than this.
You forgot to reference your class names in your style sheet
.rowTop{
border-radius: 8px;
border-collapse: collapse;
border: 2px solid black;
float: left;
height: 15px;
padding-top:5px;
padding-bottom: 33px;
margin-left: 20px;
margin-bottom: 10px;
margin-top: 5px;
width: 95%;
}
<div class="rowTop">
<div class="columnTop">
<div class="title">
<h2>Header</h2>
</div>
</div>
I'm not sure I understand your question, but first off your HTML is missing a terminating div:
<div class="rowTop">
<div class="columnTop">
<div class="title">
<h2>Header</h2>
</div>
</div>
</div>
and your CSS has no selector:
.CSS-selector-here {
border-radius: 8px;
border-collapse: collapse;
border: 2px solid black;
float: left;
height: 15px;
padding-top:5px;
padding-bottom: 33px;
margin-left: 20px;
margin-bottom: 10px;
margin-top: 5px;
width: 95%;
}
For a simple header, footer, three-column layout, I would recommend trying to understand flexbox. A simple layout might look something like:
div {
padding: 1rem;
border: 1px solid black;
}
.header, .footer {
width: 90%;
height: 15vh;
}
.flex-container {
width: 90%;
display: flex;
justify-content: space-between;
}
.flex-child {
width: 30%;
height: 85vh;
}
<div class="header">
</div>
<div class="flex-container">
<div class="flex-child">
</div>
<div class="flex-child">
</div>
<div class="flex-child">
</div>
</div>
<div class="footer">
</div>
The below diagram was given to me in an interview questions and the interviewer told me that I am missing clear:both in my code.
I tried something like this. But couldn't get the desired results
.name3 {
border: 1px solid black;
height: 50px;
width: 90px;
}
.name {
border: 1px solid black;
height: 10px;
width: 90px;
}
.name1 {
border: 1px solid black;
height: 40px;
width: 30px;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
Try this
.name3 {
border: 1px solid black;
height: 55px;
width: 100px;
float: left;
}
.name {
border: 1px solid black;
height: 10px;
width: 99px;
float: left;
}
.name1 {
border: 1px solid black;
height: 42px;
width: 34px;
float: left;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
I tried to reproduce this with Flexbox.
Here you can learn more: https://www.w3schools.com/css/css3_flexbox.asp
.top,.side,.square {
padding: 5px;
box-sizing: border-box;
border: 1px solid black;
}
.container {
display: flex;
flex-direction: column;
width: 200px;
}
.container .main {
display: flex;
flex-direction: row;
max-width: 200px;
}
.container .main .content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .main .content .square {
width: 50%;
}
<div class="container">
<div class="top">.top</div>
<div class="main">
<div class="side">.side</div>
<div class="content">
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
</div>
</div>
</div>
Hi SIMIN i have read your question and here is my solution to that. Copy past the code below in your editor. Also note that i was using opera browser for running this code, so if you are using different browser there may be a little difference in output. Good luck
<html>
<head>
<style>
.name3{
border: 1px solid black;
height: 53px;
width: 93px;
}
.name{
border: 0.5px solid black;
height: 10px;
width: 92px;
float: left;
}
.name1{
border: 0.5px solid black;
height: 41px;
width: 30px;
float: left;
clear: left;
}
#name2one{
height: 20px;
width: 30px;
border: 0.5px solid black;
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
</div>
</body>
</html>
How about using percentage in width
<div class="wrapper">
<div class="header"></div>
<div class="sidebar"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
.wrapper, .header, .sidebar, .article{
border: 1px solid black;
float: left;
}
.wrapper {
height: 100px;
width: 100px;
}
.header{
width: 100%;
height: 20px;
}
.sidebar {
height: 80px;
width: 33.33%;
}
.article {
height: 40px;
width: 33.33%;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i know this has been asked before an such, but i've tried like 5 different ways from Stack and 5 from other websites, and i can't seemsto find the right one.
It's a simple problem, the php_content div aren't getting bigger as it should be with content put into it.
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.code .if{
position: absolute;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>
Your php_content div contains a div that is absolutely positioned, which means php_content cannot match the size of its contents.
The fix is to remove this:
.code .if{
position: absolute;
}
Live Example:
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>
/******************************************************
/ CSS RESET
/*****************************************************/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/*****************************************************/
*{
box-sizing: border-box;
float: left;
}
.container{
width: 1000px;
height: 600px;
}
.code{
float: left;
width: 800px;
height: 600px;
background-color: #333333;
font-weight: bold;
}
.php{
position: relative;
top: 100px;
left: 100px;
}
.php_start,
.if_start{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 5px 5px 5px 0;
}
.php_start span,
.if_start span{
margin-left: 20px;
color: white;
font-size: 12px;
}
.php_content,
.if_content{
display: inline-block;
clear: left;
height: auto !important;
min-width: 100px;
min-height: 50px;
border-left: 10px solid #CD8B32;
}
.php_end,
.if_end{
display: inline-block;
clear: left;
height: 15px;
min-width: 100px;
background-color: #CD8B32;
border-radius: 0 5px 5px 5px;
}
.code .if{
position: relative;
}
.toolbox{
float: left;
width: 200px;
height: 600px;
background-color: #333333;
border-left: 2px solid lightgrey;
}
<div class="container">
<div class="code">
<div class="php">
<div class="php_start">
<span>PHP</span>
</div>
<div class="php_content">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
<div style="height: 100px;"></div>
</div>
<div class="if_end"></div>
</div>
</div>
<div class="php_end"></div>
</div>
</div>
<div class="toolbox">
<div class="if">
<div class="if_start">
<span>IF</span>
</div>
<div class="if_content">
</div>
<div class="if_end"></div>
</div>
</div>
</div>
Change position: absolute to relative in the .code .if block. This way the reference will be set to the div containing it.
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/
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; }