How do I make those columns to be same width? Not the fix way. I want to do it automatically. It means when one will contain more text it will be longer so the second one will be equally long.
CSS
article.leftnews {
float: left;
border-radius: 30px;
width: 43%;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
overflow: auto;
border:5px solid #0000CC;
}
article.rightnews {
border-radius: 30px;
margin-left: 52%;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
overflow: auto;
border:5px solid #000066;
}
section{
position:relative;
margin-left:auto;
margin-right:auto;
width: 700px;
text-align: justify;
}
My demo here
The best way to me is using CSS table and table-cell
http://jsfiddle.net/2d9917o7/
Update: for rounded corners style, additional <div> inside each table cell is needed.
http://jsfiddle.net/2d9917o7/1/
HTML
<div class="container">
<article class="leftnews">left<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end</article>
<article class="rightnews">right</article>
</div>
CSS
.container {
display: table;
width: 100%;
}
.leftnews,
.rightnews {
display: table-cell;
width: 50%;
background: pink;
}
.leftnews {
background: lime;
}
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I have some html content with following structure:
<div class="message-container">
<p class="message-value">someVal</p>
<div class="message-attribute">someUsername</div>
<div class="message-attribute">11-09-2017 12:30</div>
</div>
So, I want to scale my message-container up when it gets long values in message.value and scale it down as far as possible to min-width in the other way.
I also wan't to specify max-width for this props.
I've done this:
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: block;
color: #607D8B;
}
and message-username and message-datetime has fixed width.
Finally, I'm alsways getting max-width in my message-container even when it has free space to cut it down
https://jsfiddle.net/Lwrpegqe/
As you can see in jsfiddle width is too long with following content it could be shorter
Main purpose to resize block automatically
See the solution.
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
display: inline;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: inline;
color: #607D8B;
}
https://jsfiddle.net/Lwrpegqe/2/
Add display: inline-block; to your .message-container
Inline elements only take up the space of the content. A div is always a block element unless specified.
Give width and height in percentage (%).
Hope it will work for you.
.your-class {
width:100%;
height:100%;
}
just use w-100 in bootstrap 4 to fit to 100% width of container element
I've got three DIVs that I've put into a container DIV.
What I want is as follows:
Here's where I'm up to:
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
}
#leftdiv {
float: left;
padding: 0 20px;
/*margin:20px 0;*/
position: relative;
width: 25%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align: middle;
width: 100%;
text-align: center;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height: 40px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv">
<p id="light-table-paragraph">Left</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Middle</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Right</p>
</div>
</div>
</div>
Please can someone help tell me where I'm going wrong?
Thanks!
Scott
set the div the contains the three small divs display:flex and give it 75% width of the container, then set space around the content as follow:
#leftdiv {
/*float: left;*/
padding:0 20px;
/*margin:20px 0;*/
position:relative;
/* edits */
width:33.33%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align:middle;
text-align: center;
/* edits */
width:75%;
display: flex;
margin: 0px auto;
justify-content: space-around;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height:40px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top:30px;
margin-bottom: 30px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv"><p id="light-table-paragraph">Left</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Middle</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Right</p></div>
</div>
</div>
Here's how I would do it.
Give each .leftdiv (indeed this should be a class, id's are unique) 33% of total viewport width:
.leftdiv {
float: left;
width: 33%;
}
and center each paragraph inside these divs, give it 75% width:
.leftdiv p {
display: block;
width: 75%;
margin: 0 auto !important; /* you won't need !important if your code is well structured */
}
This is a cleaner solution, as you'll notice there is no horizontal scroll present.
Here is a codepen.
Also, you need to clear your parent div #leftdivcontainer (did that as well).
Hope this helps.
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
I have a strange behavior on my webpage layout.
When i add some more divs inside "sideBar" div, the central part of the webpage is pushed down. They are not related to the central part. They have borders and i see that they are far from 'main' div. Is there any way to prevent it or i should play with margins every time when i add a new div.
Here is my HTML code:
<div id="sideBarLeft">
<div id='article1'><h3>Article 1</h3><div> //Just added
<div id='article2'><h3>Article 2</h3><div> //Just added
<div id='article3'><h3>Article 3</h3><div> //Just added
<div id='article4'><h3>Article 4</h3><div> //Just added
</div>
CSS code:
#sideBarLeft {
position: fixed;
height: 800px;
width: 250px;
margin-top: 0px;
margin-left: 0px;
margin-right: 1px;
padding-top: 100px;
padding-left: 5px;
float: left;
word-wrap: break-word;
z-index: 1;
border: 1px solid #808080;
}
#article1 {
width: 200px;
border: 1px solid red;
}
Here is the central part:
#container{
margin: 0 auto;
margin-left: 256px;
max-width: 600px;
margin-top: 120px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
float: left;
width: 600px;
border: 1px dotted #808080;
}
Here is the wrapper:
#wrapper {
width: 1200px;
margin: 0 auto;
}
It is likely because you have something in the main div using clear:both;
Try changing it to clear:right; or remove it