I am trying to place two div side be side but I am not able to. I have done google and previous stackoverflow search about same problem and tried to use those but it didn't work for me.
Here is my source:
HTML:
<section id="controls" class="body">
<div id="TM" class="body">
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
</div>
<div id="wrapper" class="body">
<div id="BL" class="body"></div>
<div id="BR" class="body"></div>
</div>
</section><!-- /#controls -->
<section id="extras" class="body">
<div class="blogroll">
</div><!-- /.blogroll -->
<div class="social">
</div><!-- /.social -->
</section><!-- /#controls -->
CSS:
#controls { height: 600px; width: 800px }
#wrapper { width: 800px; height: 300px }
#TM { width:100%; border:1px solid black; height: 300px }
#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:right; margin-top: 2px; margin-left: 2px; }
Here is output from current code:
You should decrease the width of #BL and #BR elements or remove margin-left. Your siblings take more than 100% of parent width. 100%+margins.
Use box-sizing: border-box
*{box-sizing: border-box}
#controls {
height: 600px;
width: 800px
}
#wrapper {
width: 800px;
height: 300px
}
#TM {
width: 100%;
border: 1px solid black;
height: 300px
}
#BL {
width: calc(50% - 2px);
border: 1px solid black;
height: 300px;
float: left;
margin-top: 2px;
}
#BR {
width: 50%;
border: 1px solid black;
height: 300px;
float: right;
margin-top: 2px;
}
<section id="controls" class="body">
<div id="TM" class="body">
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
</div>
<div id="wrapper" class="body">
<div id="BL" class="body"></div>
<div id="BR" class="body"></div>
</div>
</section>
<!-- /#controls -->
<section id="extras" class="body">
<div class="blogroll">
</div>
<!-- /.blogroll -->
<div class="social">
</div>
<!-- /.social -->
</section>
<!-- /#controls -->
Your problem is Float in css.
if you want to place two divs side by side you should style both of them same float.
#left_one{float:left}
#right_one{float:left}
#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
To fit 2 DIVs side by side, Either they should be inlined block or floated blocks. In addition of that;
Container width = OuterWidth of Div1 + OuterWidth of Div2
OuterWidth of Div = margin-left + DIV's width + margin-right + 2 x border width
Since you have 1px border and 2px margin one side. You need to subtract them from the width of div.
Related
EDITED:
I have the following HTML code:
<div class="div-table">
<div class="div-table-row">
<div class="div-table-first-col">
<div>11:00</div>
</div>
<div class="div-table-col">
<div style="height: 11"></div>
<div class="appuntamentoContainer">
<div class="appuntamento" style="height: 25px">11:12 - 12:35</div> //--> need to stretch to bottom
</div>
</div>
<div class="div-table-col">
<div style="height: 0"></div>
<div class="appuntamento">11:00 - 11:45</div>
<div class="appuntamento">11:00 - 12:00</div>
<div class="appuntamento">11:45 - 12:30</div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
</div>
</div>
and CSS:
.div-table div.appuntamento {
background-color: #f3f2de;
padding: 3px 5px;
border: 1px solid #d7dde6;
border-radius: 5px;
}
.div-table {
display:table;
width:auto;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
height: 45px;
}
.div-table-col {
float:left;/*fix for buggy browsers*/
display:table-column;
width:154px;
}
.div-table-row .div-table-col{
border-left: 1px solid #d7dde6;
border-right: 1px solid #d7dde6;
border-top: 1px solid #d7dde6;
min-height: 44px;
}
.div-table-first-col {
float:left;/*fix for buggy browsers*/
display:table-column;
text-align: right;
width: 45px;
}
.div-table-first-col div{
padding: 3px 5px;
}
Here the fiddler
Notice the vertical borders. On the left side how it actually is, on the right side how it should. How do i stretch the div to the bottom?
Use the flexbox layout model. Just add display: flex; to .div-table-row, and remove any float or display property.
Here's the JSFiddle.
add height: 100% on parents table and td.
table {
height: 100%;
}
td {
height: 100%;
}
for reference look here: Make div stretch to fit td height
Check this out for some dynamic behaviour:
jQuery
var a=$(".second").outerHeight();
$(".first").height(a);
$(".third").height(a);
https://jsfiddle.net/1cejh0dL/6/
I would like to write a CSS script that involves 4 div in addition to a fifth div as a container.
The Div 1 should be at the top as a title, Div 2 should be at the center of the right side of the container ,Div 4(Containing img src) should be at the center of the container , and Div 3 should be at the bottom of the image.
I had a script as a trial but it not like that I want( Iam beginner in CSS) .
<html xmlns="http://www.w3.org/1999/html">
<head>
<title> </title>
<meta charset="utf-8">
<style>
#siena img {
display: inline-block;
margin-left: 0px;
}
#Container
{
margin-bottom: 3pc;
text-align: center;
border-width:2px;
border-color: #46b8da ;
margin-right: 100px;
margin-left: 100px;
border-style: solid;
background-color :#c4e3f3;
padding :10%;
}
#link
{
display: inline-block;
}
#price
{
top:100px;
width:50%
margin:0 auto;
float:right;
}
</style>
</head>
<body>
<meta charset="utf-8">
<h1 style="text-align: center;"> Text </h1>
<div id="Container" > <p>
<div id="siena" >
Text
<img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'>
<div id="price" >
price
</div>
</div>
<div id="link" >
<a href='https://www.google.com/?gws_rd=ssl' > </a>
</div>
</div>
</body>
</html>
Your markup looks invalid.
You have unecessary spaces within tags and unclosed p tags.
You can achieve what you want via this markup:
<div id="container">
<div id="header">Div 1</div>
<div id="content">Div 4</div>
<div id="side-content">Div 2</div>
<div id="footer">Div 3</div>
</div>
And then use CSS to position the elements:
#container {
width: 100%;
}
div {
border: 1pt solid black;
padding: 5px;
text-align: center;
}
#content {
width: 70%;
float: left;
}
http://jsfiddle.net/7dqagh7s/
Also, I would recommend using a StyleSheet rather than putting the code directly inline with the markup.
I tried to copy the image in css
.container{
width: 90%;
border: 1px solid brown;
height: 500px;
}
.top, .bottom{
margin-top: 10px;
width: 90%;
height: 100px;
border: 3px solid red;
margin-bottom: 10px;
}
.left, .right{
display: inline-block;
width: 50%;
border: 3px solid maroon;
height: 200px;
}
.right{
display: inline-block;
width: 40%;
margin-left: 5%;
}
<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom">bottom</div>
</div>
Edit since you asked about the image overlapping another div.
The following will make it so the image will not extend past it's container so the image wont overlap any other div.
.left img{
width: 100%;
max-width: 100%;
max-height: 100%;
}
Is that what you meant?
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; }
So I have several div containers for my website, and they stack vertically as follows:
and I want it to look more like this:
My HTML looks like this:
<div id="main">
<div id="header">
</div>
<div id="content">
<div id="game" class="box">
<canvas data-processing-sources="hello-web.pde"></canvas>
</div>
<div id="desc_down"> <!-- Description and Downloads -->
<div id="desc" class="box"> <!-- Description -->
</div>
<div id="down"> <!-- Downloads -->
<div id="windows" class="box">
</div>
<div id="mac" class="box">
</div>
<div id="linux" class="box">
</div>
<div id="code" class="box">
</div>
<div id="info" class="box">
</div>
</div>
</div>
<div id="screenshots" class="box">
</div>
<div id="tech_about">
<div id="tech" class="box">
</div>
<div id="about" class="box">
</div>
</div>
</div>
</div>
<div>
and my CSS like this:
#main {
max-width: 1280px;
width: 90%;
margin: 0 auto;
background-color: #b0e0e6; /* all colours temp */
}
#header, #content, #game, #desc_down, #screenshots, #tech_about, #info {
width: 100%;
}
#desc {
width: 60%;
}
#down {
width: 40%;
}
#windows, #mac, #linux, #code {
width: 50%;
}
#about {
width: 45%;
}
#tech {
width: 50%;
}
.box {
background-color: #FFFFFF;
border: 5px solid;
border-color: #000000;
height: 200px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
The heights of these boxes can and will change. I want to know how to make my website look like how want it to. Thank you.
Make them all float:left or display:inline-block.
Or better use sth like Bootstrap Grid system
There are endless ways to position your content. Here is an example of what can be achieved using floats.
Have an example!
HTML
<div id="wrap">
<div id="header"></div>
<div id="paneOne"></div>
<div class="minPane"></div>
<div class="minPane"></div>
<div class="minPane"></div>
<div class="minPane"></div>
<div id="wideMinPane"></div>
<div id="afterMini"></div>
</div>
CSS
#wrap {
width: 800px;
margin: 0 auto;
}
#header {
height: 200px;
background: #F00;
}
#paneOne {
width: 400px;
height: 500px;
background: #000;
float: left;
}
.minPane {
float: left;
width: 198px;
height: 200px;
background: #FF0;
border: solid 1px #000;
}
#wideMinPane {
float: left;
background: #F00;
border: solid 1px #000;
height: 90px;
background: #FF0;
width: 398px;
}
#afterMini {
height: 300px;
background: #F00;
clear: left;
}
Its simple. Set the width of the container div (which encloses all these div blocks)to some value.
Then give float:left to all the inner divs.
I would like to find out how can i repeat div till | centered div | and repeat div again (like a table). As i understand, i have to use responsive condition, but i have no idea how can i use it.
here is my code sample (HTML):
<!-- Slider -->
<div id="slider">
<div class="big"><img class="opt" src="images/urban1.jpg" width="930" height="367" alt="big_thumb"></div>
<div id="wrap">
<div class="line"></div>
<div id="thumbs">
<div id="button_left"></div>
</div>
<div class="line"></div>
</div>
</div>
CSS:
#slider #wrap {
width: 100%;
height: 87px;
border: 1px #666 solid;
}
#slider #wrap .line {
background:url(../images/dotted_line.png) top repeat-x;
width: ??;
height: 15px;
float: left;
}
#slider #wrap #thumbs {
width: 940px;
height: 87px;
margin: 0px auto;
border: 1px #000 solid;
}
Thanks for help.