I have three divs on the same line and want to connect them with a line:
Unfortunately, every way I tried collided with the method of display, e.g. inline-block and vertically aligned spacer divs of height 50% with bottom-border.
http://codepen.io/anon/pen/QwOOZp
if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
margin-right: 5em;
position:relative
}
.boxItem:before,
.boxItem:after
{
content:'';
width:5em;/* size of your margin */
border-bottom:1px solid;
position:absolute;
top:50%;
}
:after {
left:100%;
}
:before {
right:100%;
}
.boxItem:first-of-type:before,
.boxItem:last-of-type:after {
display:none;
}
.myBox {
white-space:nowrap;
/* */ text-align:center;
}
body {
}
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
<div class="boxItem">4</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
</div>
fork of your pen
Try this:
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
}
div.line {
display: inline-block;
border-top: 1px solid black;
width: 2em;
}
<div class="boxItem">1</div><!--
--><div class="line"></div><!--
--><div class="boxItem">2</div><!--
--><div class="line"></div><!--
--><div class="boxItem">3</div>
Note: I used <!-- and --> to comment out the white space ensuring the line actually touches the divs. More info on that bit: https://stackoverflow.com/a/19038859/2037924
EDIT: Same in CodePen, for the case you like that more for some reason: https://codepen.io/anon/pen/wBPPRz
You could add a div with the width of your margin:
<div class="boxItem">1</div>
<div class="emptyDiv"></div>
<div class="boxItem">2</div>
<div class="emptyDiv"></div>
<div class="boxItem">3</div>
CSS:
div {
display: inline-block;
}
div.emptyDiv{
border: 1px solid black;
width:25em;
}
div.boxItem {
border: 1px solid black;
padding: 1em;
}
Related
I have an HTML structure with many divs next to each other or below each other that all have an outline. The problem is, these outlines do not overlap, but are shown next to each other (or on top of each other). To illustrate, this is what happens:
This is my code, with added nth-child() selectors to clearly show the issue:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
My question is: How to make these outlines overlap so no 'doubles' are shown?
Update: using half the margin of the width of the outline on the cells does not always work when the outline width is 1px. For example, when the padding of .cell is 4px this is the result (when you zoom in you will see the two lines).
Update2: it seems this is a bug with Firefox on a 4k display. Running this in Firefox on a display with a HD resolution or in another browser (tested Chrome) works.
apply a margin equal to half the outline:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin: 3px; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
Or use margin on one side:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin:0 6px 6px 0; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
I do not know what I'm doing wrong. I want the word "content" to be at the end of the container using flexbox.
|1| content|
thank you.
this is my live code:
https://jsfiddle.net/0tunwopb/1/
<div class="container">
<div class="container_flex">
<div>
1
</div>
<div class="container_content">
content
</div>
</div>
</div>
.container{
width:200px;
height:200px;
border:1px solid blue;
}
.container_flex{
display:flex;
flex-direction:row;
}
.container_flex div{
border:1px solid red;
}
.container_content{
flex-grow:1;
align-self:flex-end;
}
thanks
The .container_content element is already flush up against the right-hand edge of .container_flex.
If you want the text content to align to the right, you're looking for text-align: right:
.container {
width: 200px;
height: 200px;
border: 1px solid blue;
}
.container_flex {
display: flex;
flex-direction: row;
}
.container_flex div {
border: 1px solid red;
}
.container_content {
flex-grow: 1;
align-self: flex-end;
text-align: right;
}
<div class="container">
<div class="container_flex">
<div>
1
</div>
<div class="container_content">
content
</div>
</div>
</div>
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
I have an image which is inside a div. It appears as expected, within the div. When margin-top is added, the background for this div extends downwards. I don't want to have this behavior. How can I change this?
My code is as follows :
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
This ensures that the column with the <p> tag goes on the left side of the screen, and the column with the image goes on the right, and it resizes as you resize the window :).
How can I make this webpage go from
-----div-----------
Text Image
-----/div-----------
to
-----div------------
Text
--/div--Image----
Image illustrating what I would like :
Edit:
I originally skipped over the fact that you provided some HTML and CSS in the question, so in my original answer I just went off the image provided. Looking at the HTML and CSS you provided, the only thing you'd have to do to get the desired result is set a negative bottom margin in your CSS on the img tag. Here's a jsFiddle using your original markup with the only significant addition to the CSS being the negative bottom margin set on the img tag.
The added benefit of doing it this way is that the image will stay in the desired spot (extended slightly below the div that contains it), even when adding more lines of text to the paragraph (p) changes the height of the containing element (.page div).
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
img {
margin-bottom:-50px;
}
Original answer:
You could just position the image below the text, float the image, and set a negative top margin on the image to make it cut back into the element containing the text. This way, the image will keep sitting in the right spot, even when adding more lines of text changes the height of the containing element.
Here's a jsFiddle
HTML
<p>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>
<img />
</p>
CSS
p {
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
background-color: yellow;
border: 3px solid black;
float: right;
margin: -70px 100px;
}
I don't quite understand the question completely, but I coded what you wanted in css with your HTML untouched. Hopefully that helps. Check out the JSFiddle.
http://jsfiddle.net/bH8qA/
HTML:
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS:
.page{
background-color:#cc0000;
border-top:4px solid #000;
border-bottom:4px solid #000;
width:500px;
margin:0 auto;
padding: 5px;
position:relative;
}
.half{
display:inline-block;
width:44%;
vertical-align:top;
text-align:right;
}
.half + .half{
position:absolute;
top:20px;
text-align:left;
margin-left:4%;
}
.half > img{
display:block;
height:100px;
background-color:#F5EB00;
border:4px solid #000;
}
use css and use the overflow: hidden on the parent of that div.
Something like this? http://codepen.io/pageaffairs/pen/urGnL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.page {
width:500px;
margin:0 auto;
padding: 5px;
background: red;
}
.half{
width:44%;
margin:0 2%;
}
.float {
float: right;
}
.page, img {
border: 5px solid black;
}
img {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="page">
<div class="half float">
<img src="imghere.png" alt="img" />
</div>
<div class="half">
<p>Text</p>
</div>
</div>
</div>
</body>
</html>
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>