I'm making a form with two input area, the second area should be content editable div somehow.
I want to make the #topic_title_input sitting above the #topic_content_input with the same width. It could be easily achieved by giving them display:inline-block, But for some complicated reason, I can't change the display-inline property of the second input area
Any idea how to make the #topic_title_input sitting above the #topic_content_input?
html
<div class="left_container">
<input id="topic_title_input" >
<div id="topic_content_input" contenteditable="true" ></div>
</div>
<div class="right_container">
</div>
<div class="clear_float">
</div>
css
#topic_title_input{
width:521px;
}
#topic_content_input{
/*do not change the display:inline */
width:521px;
display:inline;
background-color: orange;
border: solid 1px black;
}
/*do not change the css below*/
.left_container{
position:relative;
float:left; width:50%;
}
.right_container{
position:relative;
float:right; width:50%;
}
</style>
Related
For example, HTML:
<div style="top:0;">January</div>
<div style="top:30px;">February</div>
<div style="top:60px;">March</div>
CSS:
div{
position:absolute;
border-bottom: 1px solid black;
}
I want to add half of the original content width before and after the content, such that I have the width of each div doubled.
The effect looks like this, workaround by manually inserting inline blocks one by one:
https://jsfiddle.net/vj25udLy/13/
If I can set the width directly as 200% of its content width or some ratio else, the job seems much simpler and more flexible.
JS/jQuery solution is welcome if there is no pure CSS solution.
A trick is to use data-attribute for the content then you add it within both pseudo-element (now you have 2x the content) then you hide one and you make the other centred:
.element {
display:inline-block;
margin:20px;
border-bottom:1px solid;
}
.element:before,
.element:after {
content:attr(data-text);
}
.element:before {
visibility:hidden;
}
.element:after {
display:inline-block;
transform:translate(-50%);
}
<div class="element" data-text="January"></div>
<div class="element" data-text="February"></div>
<div class="element" data-text="March"></div>
<div class="element" data-text="aaaaaaaaaaaaaaaa"></div>
<div class="element" data-text="bb"></div>
Another idea if you simply want to achieve the border is to use a pseudo element and make its width 200% (or left:-50% and right:-50%):
body {
text-align:center;
}
.element {
display:inline-block;
margin:20px;
position:relative;
}
.element:after {
content:"";
position:absolute;
left:-50%;
right:-50%;
bottom:0;
height:1px;
background:#000;
}
<div class="element">January</div>
<br>
<div class="element">February</div>
<br>
<div class="element">March</div>
<br>
<div class="element">aaaaaaaaaaaaaaaa</div>
<br>
<div class="element">bb</div>
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
I am trying to get two divs to sit side by side within another div, however the first div won't show up in the container div. "contactleft" wont show up inside of "contactcont". I'm not sure if it has something to do with the display:block's or not? I tried clearing the "left" one too, no luck. Anyone know whats up? Thank you!
html:
<div id="contact">
<img src="Images/contactbanner.jpg" alt="contactbanner">
</div>
<div id="contactcont">
<div id="contleft">
</div>
</div>
CSS:
#contactleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
#contactcont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
You have what I assume is a typo in your code. Should work correctly with the following:
<div id="contactcont">
<div id="contactleft">
</div>
</div>
See jsfiddle
You have a typo at contleft in your CSS it should be :
#contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
Your HTML looks fine :
<div id="contactcont">
<div id="contleft">
inner content here
</div>
</div>
Here is the fiddle showing that.
You're actually pretty good there, I would just change your "contactLeft" to a class, and repeat "contactLeft" as many times as you need to. Here's a link to a CodePen.
Link to CodePen
Here's the HTML:
<div id="contactCont">
<p>contact Container</p>
<div class="contleft">
<p>contact Left</p>
</div>
<div class="contleft">
<p>contact Left</p>
</div>
</div>
And here's the CSS:
.contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
border: 1px solid black;
margin-left:1px;
}
#contactCont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
Note, that I changed your banner height to 20px and stretched the screen width.
Then I just copied your second "div" inside your container in the same hierarchy to add another side by side. I added 1px of margin-left, and 1px solid black borders to exaggerate the point.
You can also reference bootstrap for some responsive sizings if you're new to this until you get to understanding the CSS and HTML elements a little more.
Get BootStrap
I have a structure like this:
HTML
<div class="cat_item">
<div class="cat_image">
<img src="/res/imyg/srm450v2.jpg" />
</div>
<div class="cat_desc">
<h2>Mackie - SRM450v2</h2>
<p>
Description Text
</p>
</div>
</div>
LESS
.cat_item {
padding:10px;
border-radius:5px;
background-color:white;
box-shadow:2px 2px 5px black;
color:black;
.cat_image {
float:left;
margin-right:25px;
padding:5px;
background-color:red;
img {
width:125px;
height:175px;
}
}
.cat_desc {
padding:5px;
}
}
Now I want the cat_item div to be changing height, so it fits the image. However only the text influences the height of cat_item div. What am I doing wrong?
It's the float. Try a clearfix CSS or set overflow: hidden to the outer div.
How to clear CSS floats without extra markup – different techniques
explained. There are three major approaches: a) Floating the
containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS
pseudo-class.
From: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
You need the following just before the last closing </div>.
<div class="clearfix"></div>
And in your CSS:
.clearfix{
clear: both;
}
I'm trying to make a table with the display:table-cell and display:table css properties. It looks like this:
My problem is that the orange table cell needs to be just as big as its inner content. Sometimes the green boxes are 100px and sometimes they are 200px. The .left should auto-grow. I would like a CSS solution for this problem. Is that possible?
It should look like this:
Here's the JSFiddle. And here's the code:
Html:
<div class="wrapper">
<div class="left">
<div class="tree">A
<br/>- B
<br/>- C
<br/>
</div>
<div class="filter">F
<br/>F2
<br/>
</div>
</div>
<div class="content">A A A
<br/>B B B
<br/>C C C
<br/>
</div>
<div class="right">S
<br/>S2
<br/>
</div>
</div>
CSS:
div {
margin:2px;
padding:2px;
}
.wrapper {
width:700px;
border:solid 1px red;
display:table;
table-layout:fixed;
}
.right {
display:table-cell;
border:solid 1px blue;
width:100px;
}
.left {
display:table-cell;
border:dashed 1px orange;
}
.content {
display:table-cell;
}
.tree, .filter {
display:block;
width:100px;
border:solid 1px green;
}
The .left doesn't play nice :(
Edit2
Place width: 100px on your left class and remove table-layout:fixed; from wrapper class
FIDDLE
EDIT
In your markup remove whitespaces in .left class when it is empty like so:
<div class="left"></div> or also like:
<div class="left"><!-- some comment is also ok--></div>
This is necessary because otherwise the :empty selector won't consider this element empty.
In css add this:
.left:empty
{
display:none;
}
new FIDDLE
How about wrapping the content of your .left class within another div - like so:
<div class="left">
<div class="inner"></div>
</div>
Then, if you like, you could remove the border if .inner has no content - like so:
.inner:empty
{
border:none;
}
FIDDLE
You can change the div containing the left class in your HTML to a span
<span class="left">
<!-- no content, should not be displayed !-->
</span>
Then change your CSS changing your display from table-cell to inline-block
.left {
display:inline-block;
border:dashed 1px orange;
}
You could also try this...
FIDDLE Again