Okay, so I'm making a little layout just for personal use and I would like 5 columns side by side. I have the following so far;
<center>
<!DOCTYPE html>
<html>
<body>
<body style="background-color:#B0B0B0;">
</body>
</html>
<br><br>
<!DOCTYPE html>
<html>
<body>
<div style="font-family:verdana;padding:25px;border-radius:70px;border:8px solid black; width:800px; background-color:#D8D8D8;">
<iframe src="http://free.timeanddate.com/clock/i3nhi1p2/n889/fn17/fs20/tc777/ftb/bo2" frameborder="0" width="146" height="29"></iframe>
<br><br><br>
<style>
#columns {
width: 250px;
}
#columns .column {
position: relative;
width: 46%;
padding: 1%;
border: solid 1px #000;
}
#columns .center {
float: center;
}
</style>
<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
<div class="center column">
TEXT GOES HERE
</div>
<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
<div id="columns">
<div class="center column">
TEXT GOES HERE
</div>
</div>
<br><br>
</center>
</body>
</html>
</div>
</body>
</html>
</center>
The problem is the columns are stacked on top of each other, not side by side, would anyone be able to help me here? Thanks.
Float the columns left!
#columns .float {
position: relative;
width: 46%;
padding: 1%;
border: solid 1px #000;
}
Related
I need a simple way to make my layout form two tiles for content in a row.
Currently .cellleft extends to the right end so .cellright is displayed in the next row.
div.cellleft{
background-color: #191a1c;
margin-top: 40px;
margin-left: 100px;
margin-right: 1px;
padding-top: 1px;
width: 43%;
}
div.cellright{
background-color: #191a1c;
margin-top: 40px;
margin-right: 100px;
margin-left: 1px;
padding-top: 1px;
width: 43%;
}
problem pictured
To make your .cellleft to go left and .cellright to go right, try this:
.cellleft, .cellright {
width: 50%;
float: left;
}
.cellleft {
background-color: red;
}
.cellright {
background-color: blue;
}
.clearFloat {
clear: both;
}
<div class"row">
<div class="cellleft">
some contents here.. this is left cell
</div>
<div class="cellright">
some contents here... this is right cell
</div>
</div>
<div class="clearFloat"></div>
<div class"row">
<div class="cellleft">
some contents here.. this is left cell
</div>
<div class="cellright">
some contents here... this is right cell
</div>
</div>
<div class="clearFloat"></div>
<div class"row">
<div class="cellleft">
some contents here.. this is left cell
</div>
<div class="cellright">
some contents here... this is right cell
</div>
</div>
Make use of float. You can choose to float your .cellright to its right too.
Eg; Change in your css, float: right for .cellright
Hope this helps.
Please try below CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width:40%;
margin:10px;
}
</style>
</head>
<body>
<div class"row">
<div class="box">
some contents here.. this is left cell
</div>
<div class="box">
some contents here... this is right cell
</div>
</div>
<div class"row">
<div class="box">
some contents here.. this is left cell
</div>
<div class="box">
some contents here... this is right cell
</div>
</div>
<div class"row">
<div class="box">
some contents here.. this is left cell
</div>
<div class="box">
some contents here... this is right cell
</div>
</div>
</body>
</html>
i found the ideal solution for my case:
.cell {
width: 50%;
height: 100%;
float: left;
}
.contentbox{
background-color: #191a1c;
margin-top: 40px;
margin-right: 1px;
padding-top: 1px;
margin-left: 50px;
margin-right: 50px;
}
<div class="cell">
<div class="contentbox">
stuff
</div>
<div class="contentbox">
stuff
</div>
</div>
<div class="cell">
<div class="contentbox">
stuff
</div>
<div class="contentbox">
stuff
</div>
</div>
I would like to achieve this effect
Basically, I want an image and text both centered with the image to the left and text to the right. Both image and text are part of a bigger div that makes up its own row. It doesn't matter if the img or text is part of its own div as long as this effect is achieved.
It would be best to have this done without using flex, which I think is a common way to work around any trouble with spacing and position. However, I've read negative things about this technique so i rather just play it safe and not use it.
Help would be awesome, thank you
I had also same problem. I wanted to achieve the center alignment of image and text and solved it using the technique that i used in this fiddle. Check this fiddle
<div style="background-color:black;color:white;padding:20px; display: flex;">
<div style="color:white;overflow:hidden;width: 50%;height: 100px;">
<img src="http://placehold.it/350x150" style=" margin-right: 10px; float: right; width: 75%;">
</div>
<div style="color:white;/* padding:20px; */width: 50%;height: 100px;">
<h2 style=" margin-left: 10px;">This is text</h2>
</div>
</div>
https://jsfiddle.net/Lpjxse6L/
You can try this..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 2px solid; text-align: center;">
<div class="col-sm-3">
<h3>Parent Div</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of image</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of text</h3>
</div>
<div class="col-sm-3">
</div>
</div>
</body>
</html>
Here is what I did, see if you understand it or if you have any questions. http://codepen.io/anon/pen/RKppYd
<div class="container">
<div class="images"><img class="top" src="http://placehold.it/350x150"></div>
<div class="text">some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably. </div>
</div>
.container {
text-align:center;
}
.top {
vertical-align: text-top;
}
.images {
display:inline-block;
}
.text {
display:inline-block;
vertical-align: text-top;
width:350px;
background-color: black;
color:white;
}
If you don't want to use displa:flex then use can try this
.container{
float:left;
position:relative;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
}
.section{
float:left;
margin:0 10px;
padding:10px;
border:1px solid #000;
}
.wrapper {
background: #fbfbfb;
border: 1px solid #000;
float: left;
width: 100%;
padding: 10px 0;
}
<div class="wrapper">
<div class="container">
<img src=" http://fillmurray.com/200/200" class="section"/>
<div class="section"><p>Text for fun!!</p></div>
</div>
</div>
It's pretty straightforward if you use display flex.
You can then set the justify-content property to center.
.parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* The following is optional, to add space between image and text */
.parent div {
margin: 0 5px;
}
<div class="parent">
<div><img src=" http://fillmurray.com/200/200"/></div>
<div><p>Text for fun!!</p></div>
</div>
I am trying to create a site layout with a main content area, a marginal column on the right. Below the main content there may go more elements, usually with the same width as the main content. But now it should be possible to create wider elements in this area and the marginal column should reflow automatically.
To make it short, what I want to achieve is something like this
body,
html {
height: 100%;
margin: 0px;
padding: 0px;
}
div.content-area {
outline: 3px solid black;
margin: 6px;
padding: 5px;
}
#main {
width: 200px;
float: none;
min-height: 250px;
display: inline-block;
}
div.marginal {
height: 100px;
width: 250px;
float: right;
background-color: #f1f1f1;
clear: both;
}
div.content-module {
width: 200px;
height: 100px;
float: none;
display: inline-block;
}
div.content-module.wide {
width: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>This is how it should look like</title>
</head>
<body>
<div style="width: 500px; height: 90%;">
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div id="main" class="content-area">
Main Area
</div>
<div class="content-module content-area">Content</div>
<div class="content-module content-area wide">Content wide</div>
<!-- Following div will be above, where the other marginal divs are -->
<div class="marginal content-area">Marginal module</div>
<div class="content-module content-area">Another content</div>
</div>
</body>
</html>
...with the HTML code shown here.
<body>
<div style="width: 500px; height: 90%;">
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module (should appear under 'Content wide')</div>
<div id="main" class="content-area">
Main Area
</div>
<div class="content-module content-area">Content</div>
<div class="content-module content-area wide">Content wide</div>
<div class="content-module content-area">Another content</div>
</div>
</body>
My first attempt was removing the clear:both; style from the marginal modules. But this causes the marginal elements to align next to each other, side by side. But they have to be under each other.
Any idea how to achieve something like this?
I know a lot of topics have been written about div side by side, but I couldn't find a solution for my specific issue. I managed to get 2 divs side by side, and be mobile friendly (not require sideways scrolling), but there's a background color problem. If 1 div has little text while the div next to it doesn't, then the missing blocks of height just show blank instead of having a background. How can I fix this while staying mobile friendly?
Example page: http://www.gloryhood.com/articles/ztest.html
CSS:
div.table {
max-width: 100%;
}
div.firsthalf {
background-color: #ffffff;
float: left;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}
div.secondhalf {
background-color: #ffffff;
margin-left: 50%;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}
HTML:
<div class="table">
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvni
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvid
</div>
</div>
I think you want something like this,
$(document).ready(function(){
$('.container').each(function(){
var firstDiv = $(this).find('.firsthalf');
var secondDiv = $(this).find('.secondhalf');
if(firstDiv.height() >= secondDiv.height()){
secondDiv.css('height',firstDiv.height());
} else {
firstDiv.css('height',secondDiv.height());
}
});
});
body{background: #39b1a4;}
div.table {
max-width: 100%;
}
div.firsthalf {
background-color: #ffffff;
float: left;
width: 50%;
text-align: left;
word-wrap: break-word;
}
div.secondhalf {
background-color: #ffffff;
width: 50%;
text-align: left;
word-wrap: break-word;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="container">
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
</div>
<div class="container">
<div class="firsthalf">
Leftcvni
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
</div>
<div class="container">
<div class="firsthalf">
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvid
</div>
</div>
</div>
I have one big container, and inside I have two div, I want to separate these internal divs with vertical line, I posted down what I tried, on another example thats CSS code work correctly, but in this case not working.
HTML
<div class="rowFrame">
<div class="col-sm-6">
<h3>Info:</h3>
<p>About</p>
<p>About</p>
</div>
<div class="col-sm-6 rightcontact" >
<h3>Contact us</h3>
</div>
</div>
CSS
.container2{
border-style: solid;
border-width: 3px;
display: inline-block;
width:100%;
}
.rowFrame{
top: 0;
bottom: 0;
left: 50%;
border-left: 2px;
}
So you want a vertical line between the two divs? Just add a border to one of the two divs. If you want full width you need to make your container fluid. Here is an example showing both full width and normal container.
full width example (fluid container)
jsfiddle demo
html
<div class="container-fluid" id="mycontainer">
<div class="col-sm-6" id="one">
<h3>Info:</h3>
<p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
<p>Podelite sa nama Vase misljenje.</p>
</div>
<div class="col-sm-6" id="two" >
<h3>Kontaktirajte nas</h3>
some text here... bla bla bla
</div>
</div>
css
#mycontainer{
border:1px solid black;
overflow: hidden;
}
#one{
border-right:1px solid black;
}
normal container
jsfiddle demo
html
<div class="container" id="mycontainer">
<div class="col-sm-6" id="one">
<h3>Info:</h3>
<p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
<p>Podelite sa nama Vase misljenje.</p>
</div>
<div class="col-sm-6" id="two" >
<h3>Kontaktirajte nas</h3>
some text here... bla bla bla
</div>
</div>
css
#mycontainer{
border:1px solid black;
}
#one{
border-right:1px solid black;
}
If you do what #primeape91 is suggesting you'll also need to include the clearfix hack to get the float to act like a block again.
div.rowFrame:after {
content: "";
display: table;
clear: both;
}
div.rowFrame > div {
width:50%;
float:left;
}
I made a few changes but here's a basic example of what you can do:
HTML
<div id="container">
<div id="one">
<h3>Info:</h3>
<p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
<p>Podelite sa nama Vase misljenje.</p>
</div>
<div id="two">
<h3>Kontaktirajte nas</h3>
</div>
</div>
CSS
#container {
height: 500px;
border: medium black solid;
}
#container div {
height: 100%;
padding-left: 20px;
}
#one {
width: 50%;
float: left;
border-right: thin black solid;
}
#two {
overflow: hidden;
border-left: thin black solid;
}
View on Codepen