I'm using pure CSS to create table layouts and neither my rows nor cells are behaving like tr or td elements.
The results seem to be that cells do not keep a consistent width and rows seem to have a float: left behavior when they should be display: block
This seems to work OK without the anchor tags... why?
.livesearchtable {
display: table;
table-layout: fixed;
width: 100%;
}
.livesearchrow {
display: table-row;
background: #f8f8f8;
width: 100%;
}
.livesearchcell {
display: table-cell;
width: auto;
padding: 5px 7px;
border-bottom: 1px solid #ccc;
white-space: nowrap;
}
<div class="livesearchtable">
<a href="../something.php">
<div class="livesearchrow">
<div class="livesearchcell">1</div>
<div class="livesearchcell">Some text thats long enough to make a difference</div>
<div class="livesearchcell">Lorem Ipsum</div>
</div>
</a>
<a href="../something.php">
<div class="livesearchrow">
<div class="livesearchcell">2</div>
<div class="livesearchcell">short</div>
<div class="livesearchcell"></div>
</div>
</a>
</div>
Try this. Take class 'livesearchrow' and set it as class for a tags. Delete divs with 'livesearchrow' class. Now a.livesearchrow is table-row and divs inside it are table-cells.
<div class="livesearchtable">
<a href="../something.php" class="livesearchrow">
<div class="livesearchcell">1</div>
<div class="livesearchcell">Some text thats long enough to make a difference</div>
<div class="livesearchcell">Lorem Ipsum</div>
</a>
<a href="../something.php" class="livesearchrow">
<div class="livesearchcell">2</div>
<div class="livesearchcell">short</div>
<div class="livesearchcell"></div>
</a>
</div>
Related
im trying to create a footer with a few social media icons...however, the method i've tried has resulted in the following problem :
expectation:
reality:
as you can see i'm failing in bringing the social media icons closer together... i tried setting the columns flex % to - however that pulls everything closer together towards the left of the screen...
here is my .row and .column as well as the social media icons..
.row {
display: flex;
}
.column {
flex: 30%;
padding: 00px;
}
.marginauto1 {
margin: 30px auto 20px;
display: block;
horizontal-align; middle;
vertical-align: middle;
}
<footer class= "marginauto1">
<center><div class="row">
<div class="column">
<center><a class= "pointer" href="twitter_url">
first time taking a stab at this on my own and I'm just really stuck here.. any help or tips would be appreciated!
If you want to put all your icons together in the middle:
img{
height:50px;
}
div{
display:flex;
justify-content: center;
background-color:blue;
}
<footer>
<div>
<img src="data:image/png;base64,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">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyFcxKQYRAhR9esHvHVZokZGCYFNC1_rMHhw&usqp=CAU">
</div>
</footer>
<center> tag will not applicable if you are using flexbox. Instead flex-box itself has some properties that you can make use of. In your use-case you can go with justify-content: center
.row{
display: flex;
justify-content: center;
}
.item{
color: red;
background: lightblue;
margin-left: 20px;
}
<footer class= "marginauto1">
<div class="row">
<div class="item 1">
<h1>Telegram</h1>
</div>
<div class="item 2">
<h1>Facebook</h1>
</div>
<div class="item 3">
<h1>Twitter</h1>
</div>
</div>
</footer>
If you don't want any space in between of 2 or more items you can remove the margin.
Its working as expected. You have defined .column with flex: 30%; which intrun will split into 3
flex-grow: 1;
flex-shrink: 1;
flex-basis: 30%;
So what have you done is allowing the element to grow till the available width with a minimum of 30% relative to the container. This is because the flex-basis is defined. This will be 33% each.
For your soution to work remove flex: 30%; from .column. This will take the width depending on the content.
If you want some gap between the element, try adding some margin or padding, I have used margin for that. Or you can set the width of column element.
Inorder to align the items center in horizontal axis, use justify-content: center; for the flex element.
Working Fiddle
.row {
display: flex;
justify-content: center;
}
.column {
padding: 0px;
margin-right: 20px;
}
.marginauto1 {
margin: 30px auto 20px;
display: block;
}
.pointer img {
width: 50px;
}
<footer class="marginauto1">
<div class="row">
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
</div>
</footer>
I have an example on JSFiddle on how I want to solve my issue with flexbox: I want the left column to fit the width accordingly to the content - break a line if the text is too long. Unfortunately it always takes as little space as possible, which results in breaking the layout.
I have a fiddle below, first you see two blocks with how it looks now, below you see 2 blocks how I want it to look like (I've defined fixed width for visual reasons, but I want it to be dynamically with flexbox, obviously).
I'm pretty sure I can do this easily but I can't see the wood for the trees. Any kind of help is highly appreciated :)
.flex {
display: flex;
background: #333;
max-width: 380px;
}
.first {
flex: 0;
background: #666;
}
.second {
flex: 1;
background: #999;
}
<p>How it looks like with my flexbox approach</p>
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<br />
<div class="flex">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr />
<p>How it should look like</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
<div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
<div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
<div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
<div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>
Use white-space:nowrap on the second element so it does not collapse.
.flex {
display: flex;
border: 1px solid green;
}
.first {
background: lightblue;
border: 1px solid grey;
}
.second {
white-space: nowrap;
background: lightgreen
}
.narrow {
width: 50%;
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr/>
<div class="flex narrow">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
I am trying to align the elements in the head portion of a webpage properly.
There are three elements placed inside a header div:
The site logo (as an image) wrapped in an anchor tag should be left justified.
A div that contains a bunch of vertically aligned menu elements right justified.
A form containing a search box and a go button. This must be centered horizontally in the page and show between to logo on the left and the menu items on the right.
All three elements should be justified to the bottom of the header div.
I have been wrestling with this but nothing seems to work. Can you please help? Thanks!
<div style="float: right;">
<ul>
<li>Menu item</li>
</ul>
</div>
<div style="float: left;">
<img style="border: 0;" src="something.png" />
</div>
<div style="width: 300px; margin: 0 auto;">
Search box
</div>
Just a quick mockup.
UPDATE: using table/table-cell trick to allow vertical-align: bottom;
You need to wrap your manu, logo and searchbox into <div> with display: table-cell; css rule.
The markup:
<div class="table header">
<div class="table-cell">
<div class="logo"> </div>
</div>
<div class="table-cell">
<div class="searchbox"> </div>
</div>
<div class="table-cell">
<div class="menu"> <br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
</div>
and css:
.table {
display: table; /* our outer contaner should behave like table; */
width: 100%; /* set width to 100% */
}
.table-cell {
display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */
vertical-align: bottom; /* align all elements vertical */
background: yellow; /* for debug purposes */
}
.logo {
float: left;
width: 100px;
background: green;
}
.menu {
float: right;
width: 100px;
background: red;
}
.searchbox {
margin: 0 auto;
width: 100px;
background: blue;
}
Complete example: http://jsfiddle.net/EREmH/4/