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
Related
I'm using bulma as a CSS framework, I have something that looks like the following:
<div class="columns is-gapless">
<div class="column is-four-fifths carte" id="column1">
<div class="viewer">
...
</div>
</div>
<div class="column is-flex is-fullheight" id="column2">
...
</div>
</div>
in my css I have:
div.viewer{
height: 100%;
width: 100%;
}
The issue I'm facing is that my class viewer is inherting the height of columns and not from his parent 'column1'. in the end My class viewer overlaps my second column ('column2') and it's not the expected behaviour. I want my element viewer to stay inside the column1 div.
Also same issue if I want to have the position of my viewer to be let's say 20px from the right border of my #column1 I did:
div.viewer{
...
position: absolute;
right: 20px;
}
However the viewer is 20px from the right border of my browser window and not my #column1
Not sure about Bulma but even with a barebones examples the viewer class will stay inside column1 no matter how big it is. (I added display: flex; just to align the columns horizontally and some borders for a visual)
.column-container {
display: flex;
padding: 5px;
border: 2px solid black;
}
#column1 {
border: 2px solid blue;
}
.viewer {
width: 100px;
height: 100px;
background-color: gray;
border: 2px solid red;
}
#column2 {
border: 2px solid green;
}
<div class="column-container">
<div id="column1">
<p>col 1</p>
<div class="viewer">
<p>viewer</p>
</div>
</div>
<div id="column2">
<p>col 2</p>
</div>
</div>
I finally solved this by setting the position of my #column1. My solution was:
div#column1{
position: relative;
}
I'm making a website that has a series of offset cards, one with image and one with text and I want to alternate the offset for each line. The only issue is I can't quite figure out how to (while keeping both in the wrapper) make the image smaller than the wrapper in height so that the text card can be at the top and overlap the top and side, like this:
Sorry for the image layout, it was supposed to be landscape. Anyway, the way I have it now, the parent and child are both at the top of the wrapper. I want it so that the text (child) is at the top and the image is slightly shorter so that I get the overlap/overlay effect from the text box on the top as well as the right. I also need to make sure, for responsiveness, that they stay inside the wraper. How should I fix that?
#wrapper{
background-color:green;
}
#parent{
width: 500px;
height:400px;
border: 4px solid blue;
background-size:cover;
}
#child{
width:300px;
height:200px;
border: 3px solid red;
position:relative;
top:0%;
left:80%;
}
<div id="container">
<div id="wrapper">
<div id="parent">
<div id="child">
This is my overlapping Text
</div>
</div>
</div>
</div>
I'm not sure this is exactly what you're going for, but if you add padding to the top of the wrapper, you can offset the child element.
#wrapper {
background-color: green;
padding-top: 50px;
}
#parent {
width: 500px;
height: 400px;
border: 4px solid blue;
background-size: cover;
}
#child {
width: 300px;
height: 200px;
border: 3px solid red;
position: relative;
top: -50px;
left: 80%;
}
<div id="container">
<div id="wrapper">
<div id="parent">
<div id="child">
This is my overlapping Text
</div>
</div>
</div>
</div>
Here's the fiddle:
https://jsfiddle.net/16f8mj39/
I have added z-index to position the text-box in front of image box.Check my code.
#container{ width:100%;position:relative; }
#wrapper{ width:100%;border:1px solid black;position:relative;overflow:auto;height:400px; }
#text_box{ position:absolute;border:1px solid red;width:50%;height:250px;top:10px;right:10px;z-index:1;background-color:red; }
#image_box{ position:absolute;border:1px solid blue; width:70%;height:300px;bottom:10px;left:10px;z-index:0;background-color:blue; }
<div id="container">
<div id="wrapper">
<p>Wrapper</p>
<div id="text_box">
<p>Text Box</p>
</div>
<div id="image_box">
<p>Image Box</p>
</div>
</div>
</div>
I want to make the following HTML display as a 3 column table using CSS.
<footer class="row">
<div class="col1">
Left Column
</div>
<div class="col2">
Middle Column
</div>
<div class="col3">
Right Column
</div>
<div class="full-col">
This should take up the width of 3 columns
</div>
</footer>
This is what my CSS looks like:
.col1,.col2,.col3{
width: 33.%;
text-align: center;
border-right: black;
border-style: solid;
border-width: 1px;
}
.row{
background-color: #ccc;
}
.col2{
margin: 0 auto;
}
.col1{
float: left;
}
.col3{
float: right;
}
.full-col{
clear: both;
}
The problem is that the middle column in HTML is in the middle and right is below, so this happened:
I can fix it by moving the middle column below (in the HTML), but isn't it possible to do this in CSS?
Add display:flex to your row instead of making use of float it will align all the columns i.e col1,col2,col3 in a row fashion.
.col1,.col2,.col3{
height:30px;
text-align: center;
border-right: black;
border-style: solid;
border-width: 1px;
flex:1;
}
.row{
background-color: #ccc;
width:100%;
display:flex;
}
}
<footer class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</footer>
Solution with float and fixing the width size according to border:
We set the width size of each cell = (100% - 6px (which is the border size by all cells)) / 3
.col1,.col2,.col3{
height:30px;
text-align: center;
width:calc((100% - 6px)/3);
float:left;
border:1px solid black;
}
.row{
background-color: #ccc;
width:100%;
}
<footer class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<br style="clear: both;" />
</footer>
I have two divs that I've placed inside another div:
<div id="outer_div">
<div id="left_div">
<!-- Buttons and text field -->
</div>
<div id="right_div">
<!-- Buttons and drop list -->
</div>
</div>
My style sheet includes the following:
#left_div {
float:left;
}
#right_div {
float:right;
}
Now, when I do this, I expect that the left and right div will be on the left and right of the screen, respectively, and that they will be aligned horizontally as well. The first holds true, however, the second hope is not true. If I put left_div above right_div, the right_div buttons and drop list are on a line below the left_div. If I put right_div above left_div, the divs are almost in line, but the right div is slightly elevated, so that it overlaps a div that is above it.
Try setting a width to your outer_div
#outer_div {
width: 100%; //or whatever width you would like it to be
}
#left_div, #right_div {
width: 50%;
}
here is a sample that works fine for me.
<div id="outer_div">
<div id="left_div">
<div class="button"></div>
<div class="button"></div>
</div>
<div id="right_div">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
and css
#outer_div
{
overflow: hidden;
width: 450px;
background: yellow;
}
#left_div {
float:left;
width:200px;
height: 200px;
border: thin red solid;
}
#right_div {
float:right;
width:200px;
height: 200px;
border: thin blue solid;
}
.button {
width: 75px;
height: 25px;
margin: 5px;
border: thin green solid;
}
and the fiddle: http://jsfiddle.net/cMhpK/
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}